看栗子：
<body> <div> <input type="button" value="按钮" title="哈喽~~~~这不是我的title"/> </div> <script src="http://www.likecs.com/vue2.6.10.min.js"></script> <script> var vm = new Vue({ el: '#app', data: { mytitle: '嗨！这是我自己定义的title', } }) </script> </body>
想把 mytitle所代表的 title值放到 < input />的 title中去
错误方式：
<input type="button" value="按钮" title="mytitle"/>
直接在title属性中放入mytitle的话，mytitle会当当作字符串解析，并不会得到我们想要的mytitle的值
正确方式：
<input type="button" value="按钮" v-bind:title="mytitle"/>来吧展示：
自定义绑定多个属性： <div> <!-- <input type="button" value="按钮" title="哈喽~~~~这不是我的title"/> --> <input type="button" value="按钮" v-bind:title="mytitle" v-bind:id="myid"/> </div> <script src="http://www.likecs.com/vue2.6.10.min.js"></script> <script> var vm = new Vue({ el: '#app', data: { mytitle: '嗨！这是我自己定义的title', myid:'呀！这又是我自定义的id' } }) </script>
来吧展示：
在属性v-bind中，如果想要写入一段内容，不能直接写入，要用单引号包裹起来，否则会被当作变量去找，找不到这个变量的值会报错
错误的方式：
直接在后面拼接内容
<input type="button" value="按钮" v-bind:title="mytitle+hhhh">
正确写法：
用引号去包裹想要拼接的内容
<input type="button" value="按钮" v-bind:title="mytitle+'hhhh'">
那么问题来咯，如果拼接的内容不加引号的话，变量是不是可以自定义呢，yeah~~~，可以滴 <div> <!-- <input type="button" value="按钮" title="哈喽~~~~这不是我的title"/> --> <!-- <input type="button" value="按钮" v-bind:title="mytitle" v-bind:id="myid"/> --> <!-- <input type="button" value="按钮" v-bind:title="mytitle+'hhhh'"> --> <input type="button" value="按钮" v-bind:title="mytitle+hhhh"> </div> <script src="http://www.likecs.com/vue2.6.10.min.js"></script> <script> var vm = new Vue({ el: '#app', data: { mytitle: '嗨！这是我自己定义的title', myid:'呀！这又是我自定义的id', hhhh:"哈哈哈哈哈" } }) </script>
来吧展示：
总结：v-bind的用法：
1.v-bind:属性名称 = "自定义属性名称"
比如：v-bind:title="mytitle"
2.可以省略v-bind，用:代替 ，可以简写成 :属性名称 = "自定义属性名称"
比如： :title="mytitle"
3. 如果想要实现单纯的表达式的拼接，一定要用引号包裹起来，否则会被当作变量来解析，在被当作变量解析的情况下，可以再重新自定义属性的值然后再拼接起来