美文网首页Web 前端开发
vue.js v-bind的使用

vue.js v-bind的使用

作者: 星星_a1c1 | 来源:发表于2019-06-08 10:12 被阅读0次

v-bind的使用

v-bind的使用目的:对标签内属性赋值时可以使用data中的变量(会动态改变)。

代码

//为了方便不严格得截取
//js
var vm = new Vue({
            el:'#ctr-01',
            data:{
                bind:'这是一个小按钮'
            }
        })

//html
<div id="ctr-01" >
            <input type="button" value="按钮" title="bind"/>
        </div>

button title作用是鼠标移动到button上会显示小字

1559959372368.png

我们想使用 data中的bind 显然 不对title做处理时 我们的“bind”会被认为是一个字符串

用法

v-bind:属性名

简写

:属性名 如:title=""

<input type="button" value="按钮" :title="15/3+bind"/>

鼠标移动到上面会显示什么? 5这是一个小按钮


相关文章

  • vue.js初使用

    vue.js使用 vue.js煊染 最小应用 v-bind “将这个元素节点的 title 特性和 Vue 实例...

  • vue 中修改属性

    属性的绑定:v-bind vue.js html

  • 2019-03-06

    1 通过以下代码体验Vue.js最核心的功能——数据的双向绑定 2 使用v-bind绑定data中的属性

  • Vue.js从0到1:v-bind指令

    Vue.js从0到1:v-bind 指令 1. 代码演示 v-bind :绑定 : 绑定class、绑定style...

  • vue.js v-bind的使用

    v-bind的使用 v-bind的使用目的:对标签内属性赋值时可以使用data中的变量(会动态改变)。 代码 bu...

  • 2 数据绑定

    1 通过以下代码体验Vue.js最核心的功能——数据的双向绑定 2 使用v-bind绑定data中的属性 语法糖...

  • 10-Vue的常用指令

    Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on Vue.js的指...

  • Vue 基础

    Vue.js双向绑定的实现原理 MVC和MVVM模式 最简单的Vue应用 v-cloak v-bind 、v-on...

  • Vue.js 样式绑定

    Vue.js class class与style是HTML元素的属性,用于设置元素的样式,我们可以用v-bind来...

  • Vuejs复习笔记

    vue.js 的复习 目录 模板语法 其他(过滤器、组件) 指令(v-show和v-if、v-bind class...

网友评论

    本文标题:vue.js v-bind的使用

    本文链接:https://www.haomeiwen.com/subject/raabxctx.html