class和style绑定

发布时间：2020-12-14 03:19:53 所属栏目：大数据来源：网络整理

导读：? 在数据绑定中，一个常见需求是，将数据与元素的 class 列表，以及元素的 style 内联样式的操作绑定在一起。由于它们都是属性(attribute)，因此我们可以使用 ? v-bind ?来处理它们：只需从表达式中计算出最终的字符串。然而，处理字符串拼接，既麻烦又容易

在数据绑定中，一个常见需求是，将数据与元素的 class 列表，以及元素的 style 内联样式的操作绑定在一起。由于它们都是属性(attribute)，因此我们可以使用?v-bind?来处理它们：只需从表达式中计算出最终的字符串。然而，处理字符串拼接，既麻烦又容易出错。为此，在使用?v-bind?指令来处理?class?和?style?时，Vue 对此做了特别的增强。表达式除了可以是字符串，也能够是对象和数组。

与HTML的class绑定(Binding HTML Classes)

对象语法

向?v-bind:class?传入一个对象，来动态地切换 class：

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

上述语法意味着，active?这个 class 的存在与否，取决于?isActive?这个 data 属性的 truthy?值。　　

这样，可以通过在对象中添加多个字段，来切换多个 class。此外，v-bind:class?指令也可以和普通?class?属性共存。所以，给定以下模板：

<div class="static"
     v-bind:class="{active: isActive,‘text-danger‘:hasError}">
</div>

然后，给定一下data：

<body>
<div class="static"
     v-bind:class="{active: isActive,‘text-danger‘:hasError}">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el: ‘.static‘,data: {
            isActive: true,hasError: false
        }
    })
</script>
</body>

将会熏染为：

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

每当?isActive?或?hasError?发生变化，class 列表就会相应地更新。例如，如果?hasError?值是?true，class 列表会变为?"static active text-danger"。　　

绑定对象，也可以无需内联，而是外部引用 data：?

<div v-bind:class="classObject"></div>

data: {
  classObject: {
    active: true,‘text-danger‘: false
  }
}

（内联、外部引用）这两种方式的渲染结果相同。我们还可以将 class 和 style 与某个?computed 属性绑定在一起，此 computed 属性所对应的 getter 函数需要返回一个对象。这是一种常用且强大的用法：　　

<div v-bind:class="classObject"></div>

data: {
  isActive: true,error: null
},computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,‘text-danger‘: this.error && this.error.type === ‘fatal‘
    }
  }
}

未完待续　　

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!