vue 动态绑定class的几种方式
2019-12-05 本文已影响0人
郝艳峰Vip
写在前面
其实这个方式vue.js
官网就有,而且记录的挺详细的,如果想更清楚的了解请移步vue.js Class 与 Style 绑定
作者把官网的记录在这里,是为了方便自己总结与学习。
首先说一下绑定方式有三种,前两中写那种方式都行。
第一种:
<div v-bind:class="{ active: isActive }"></div>
第二种:
<div :class="{ active: isActive }"></div>
第三种:直接绑定style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
然后在具体说说如何绑定的,在项目中使用
- 一,可以给
:class
传一个对象,这样就可以动态切换class:
<div v-bind:class="{ active: isActive }"></div>
<script>
export default {
data() {
return {
isActive: true,
}
}
}
</script>
上面的语法表示,active这个class是否起作用取决与isActive是true还是false.
- 二, 还可以给
:class
传多个对象,中间以逗号隔开,就好了
<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>
<script>
export default {
data() {
return {
isActive: true,
hasError: false
}
}
}
</script>
- 三, 还可以给把这写条件放到一个对象里,
<div v-bind:class="classObject"></div>
<script>
export default {
data() {
return {
classObject: {
active: true,
'text-danger': false
}
}
}
}
</script>
这样写跟上边的效果是一样的,只不过在标签里看着更简洁,也方便维护
- 四,数组语法,
写到这就想起在项目中经常用到,用来展示某个值是什么颜色或者样式
三元运算符经常用到
<div class="mask" :class=" isActive ? 'on' : ' ' "></div>
<li v-for="(item,i) in lotterylist" :key="i">
<div class="box">
<p><img :src="item.img"></p>
<p>{{item.title}}</p>
</div>
//这里就是动态的绑定div的样式
<div class="mask" :class="i == index ? 'on' : ''"></div>
</li>
下边就说说还可以直接绑定内联样式v-bind:style
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
<script>
export default {
data() {
return {
activeColor:"blue",
fontSize:"40"
}
}
}
</script>