Vue.jpeg
📝【Vue】学习养成记，【程序员必备小知识】
📔 今日小知识——Vue常用指令之v-bind
v-bind指令是专门操作属性的指令，那么什么是属性呢？例如我们经常设置图片是src，设置鼠标悬停的文本是title，还有类class等，这种就是属性。
其实元素的属性有很多种的，都是写在元素的内部，那该如何设置属性呢，v-bind这个指令我们又该如何去使用呢？
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为假就设置为空。
<img class="active"/>
<img v-bind:class="isActive?'active':''"/>
三元表达式看起来表达式，代码有点多，还有另一种写法，对象的写法
<img v-bind:class="{active:isActive}"/>
active类名是否生效，取决于isActive的值，如果isActive为真active就生效，如果isActive为假就不生效。
3. v-bind简写
<img :src="imgSrc"/>
<img :class="isActive?'active':''"/>
<img :class="{active:isActive}"/>
4.总结
-
v-bind指令的作用是为元素绑定属性 - 语法是
v-bind:属性名 - 简写可以省略
v-bind只保留:属性名 - 需要动态的添加
class建议使用对象的方式
Vue 官方文档：http://vuejs.org/v2/guide/syntax.html
Vue 中文文档: https://cn.vuejs.org/v2/guide/syntax.html
5. 写在后面
关注我，更多内容持续输出
🌹 喜欢就点个赞吧👍🌹
🌹 觉得有收获的，可以来一波 收藏+关注，以免你下次找不到我😁🌹
🌹欢迎大家留言交流，批评指正，
转发请注明出处，谢谢支持！🌹
网友评论