可以传给 v-bind:class 一个对象,以动态地切换class:

<div v-bind:class="{ active: isActive }"></div>

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActivetruthiness(所有的值都是真实的,除了false,0,“”,null,undefined和NaN)。

可以在对象中传入更多属性来动态切换多个 class。此外,v-bind:class 指令也可以与普通的 class 属性共存。如下模板:

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
©本文为原创文章,著作权归博主所有,转载请联系博主获得授权

发表评论