0
点赞
收藏
分享

微信扫一扫

vue中的Class与v-bind绑定

春意暖洋洋 2022-03-11 阅读 56

v-bind用于class和style的不同情况

一.对象语法

active 这个 class 是否有效取决与 isActive 的值 , 且不影响普通class d1 的设置 , 并且这个div 的 class的取值一直动态的受isActive的影响

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

如果isActive 为 true上面的表达式相当于

<div class="d1 active"></div>

二.数组语法

直接给v-bind:class绑定一个数组,来生成一个class列表

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

渲染成

<div class="active text-danger"></div>

也可以使用三元表达式

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

这样写将始终添加 errorClass,但是只有在 isActive 是 truthy[1] 时才添加 activeClass。

不过,当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法:

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

三.用在组件上

当在一个自定义组件上使用 class property 时,这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

举报

相关推荐

0 条评论