Vue绑定时可以通过传入一个对象,来动态的切换class:
<div v-bind:class="{active:isActive}" ></div>
这行代码的意思就是,actie这个class是否存在,取决于属性isActive。
对象中也可以传入多个属性:
<div v-bind:class="{active:isActive,two:error}" ></div>
data () {
return {
isActive:true,
error:false
}
}
渲染结果:
<div class="active"></div>
虽然官网中还有数组语法,但说实话我做项目基本没有用到过,这里还是说下我在做项目使用的动态切换class的一种情况。
<div class="SizeColors-right">
<span v-for="(size,index) in sizes" :key="size" @click="selected(index,size)" :class="{active: activeName == size}">
{{size}}
</span>
</div>
这里的 active 是我添加的类名,activeName 是事件selected 选中的值,意思是,如果选中的值存在于数据里面, 也就是选中当前这条数据,就给当前这条
数据的DOM添加类名。可以动态的切换class。