【Vue】学习笔记——Vue常用指令之v-bind
v-bind指令是专门操作属性的指令。例如设置图片的src，设置鼠标悬停的文本是title，还有class等，这种就是属性。
1. v-bind的使用
<img v-bind:src="图片地址" />
具体实例如下：
<body>
<div id="app">
<img src="图片地址" />
<img v-bind:src="imgSrc" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"</script>
<script>
var app = new Vue({
el:"#app",
data: {
imgSrc:'图片地址'
}
});
</script>
</body>
2. v-bind设置类名
假设img的class为active，那么使用v-bind设置类名属性，使得active生效可以利用三目表达式，如果isActive为真就设置active，如果isActive为假就设置为空。
<img class="active" />
<img v-bind:class="isActive ? 'active' : ''" />
三元表达式看起来表达式，代码有点多，还有另一种写法，对象的写法
<img v-bind:class="{active: isActive}" />
active类名是否生效，取决于isActive的值，如果isActive为真active就生效，如果isActive为假就不生效。
3. v-bind简写
简洁的写法：用
:符号替代v-bind:。
<img :src="imgSrc" />
<img :class="isActive ? 'active' : ''" />
<img :class="{active: isActive}" />
4.总结
v-bind指令的作用是为元素绑定属性- 语法是
v-bind:属性名 - 简写可以省略
v-bind只保留:属性名 - 需要动态的添加
class建议使用对象的方式
关于
v-bind官方文档
