看栗子:
<body>
<div id="app">
<input type="button" value="按钮" title="哈喽~~~~这不是我的title"/>
</div>
<script src="./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 id="app">
<!-- <input type="button" value="按钮" title="哈喽~~~~这不是我的title"/> -->
<input type="button" value="按钮" v-bind:title="mytitle" v-bind:id="myid"/>
</div>
<script src="./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 id="app">
<!-- <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="./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. 如果想要实现单纯的表达式的拼接,一定要用引号包裹起来,否则会被当作变量来解析,在被当作变量解析的情况下,可以再重新自定义属性的值然后再拼接起来