登录

vue.js添加绑定class

我来纠错
//我们可以传给 v-bind:class 一个对象,以动态地切换 class 。
<div v-bind:class="{ active: isActive }"></div>
上面的语法表示 classactive 的更新将取决于数据属性 isActive 是否为真值 。
我们也可以在对象中传入更多属性用来动态切换多个 class 。此外, v-bind:class 指令可以与普通的 class 属性共存。如下模板:
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
//如下 data:
data: {
  isActive: true,
  hasError: false
}
//渲染为:
<div class="static active"></div>

当 isActive 或者 hasError 变化时,class 列表将相应地更新。例如,如果 hasError 的值为 true , class列表将变为 "static active text-danger"。
你也可以直接绑定数据里的一个对象:
<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
渲染的结果和上面一样。
发送
热门关键词:
命令
知识类型:
标题描述:
详细解答:

提交审核您编辑的知识会经过 前端大牛 人工审核。