你常用的vue中的属性绑定v-bind

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