vue中的属性绑定v-bind
v-bind作用:
v-bind是Vue中提供的用于绑定属性的指令,可以简写成英文冒号: v-bind可以写一些合法的js表达式
问题引入:
eg:现在input标签中title属性想利用data对象中没有title数据该怎样做呢?
正常情况下会如何写呢?
下面请看大多数人正常情况下写出的代码:
<div id="app">
<input type="button" value="按钮" title="myTitle">
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
myTitle:'这是一个自己定义的title',
},
methods:{
}
})
var input = document.getElementsByTagName('input')[0];
console.log(input.title)
</script>
复制代码
结果如下:
由打印结果可以看出,这种方法并不能达到我们想要的结果。v-bind进行对属性的绑定
代码如下:
<div id="app">
<input type="button" value="按钮" v-bind:title="myTitle">
</div>
<script>
var vm = new Vue({
el: '#app',
data:{
myTitle:'这是一个自己定义的title',
},
methods:{
}
})
var input = document.getElementsByTagName('input')[0];
console.log(input.title)
</script>
复制代码
结果如下:
由打印结果可以看出,利用v-bind进行属性绑定后达到了我们想要的结果注:如有疑问可加本人QQ:2499578824