v-bind指令是专门操作属性的指令,平时经常设置图片是src，设置鼠标悬停的文本是title，还有类class等，这种就是属性。
v-bind指令的作用是为元素绑定属性
语法是v-bind:属性名
简写可以省略v-bind只保留:属性名
需要动态的添加class建议使用对象的方式
1. 如何使用v-bind指令
语法是v-bind:属性名=表达式
固定写法：
<img src="图片地址"/>
那要设置属性就是这么写(v-bind写法)，图片的src属性的值就是在data中定义的imgSrc的值
<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为假就设置为空。
对象的写法
active类名是否生效，取决于isActive的值，if isActive为真active就生效，如果isActive为假不生效。
- v-bind简写
<img :src="imgSrc"/>
<img :class="isActive?'active':''"/>
<img :class="{active:isActive}"/>
扫一扫
2194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
