Vue.js中的v-bind指令是用来将数据绑定到HTML元素的属性上的。它可以用来动态地绑定一个或多个HTML属性,例如元素的class、style、id、title、href、src等属性。 v-bind指令的语法为v-bind:attribute="expression"。
代码一:注意这里的图片的src标签属性和title属性都用了v-bind修饰。
<body>
<div id="app">
<img v-bind:src="ImageSrc" alt="" v-bind:title="ImgTitle+'!'">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<!-- v-bind true添加 false移除 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
ImageSrc:"demo-计数器/图片1.gif",
ImgTitle:"黑马程序员",
},
})
</script>
</body>
v-bind:后边的双引号里是js表达式,因此v-bind:attribute="expression"。
- src = "ImageSrc" = “demo-计数器/图片1.gif”;
- title =" ImgTitle+'!' " = "黑马程序员" + '!' = "黑马程序员!"。
结果图一:
图片正常显示。
代码二:注意这里的图片的src标签属性和title属性都没有用v-bind修饰。
<body>
<div id="app">
<img src="ImageSrc" alt="" title="ImgTitle+'!'">
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<!-- v-bind true添加 false移除 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
ImageSrc:"demo-计数器/图片1.gif",
ImgTitle:"黑马程序员",
},
})
</script>
</body>
结果图二:attribute="value"。
图片的src属性值为“ImageSrc”,title属性值为“ImgTitle+'!'”。
图片不但没有正确显示,还会报错。
结论:
v-bind:动态的决定属性。加:后边的双引号里是js表达式,不加 :则是字符串。