class和style绑定

落日映苍穹つ 2023-10-09 11:05 54阅读 0赞

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

## 与HTML的class绑定(Binding HTML Classes) ##

### 对象语法 ###

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

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

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

然后，给定一下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>

将会熏染为：

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

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

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

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

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

未完待续

转载于:https://www.cnblogs.com/Black-rainbow/p/9362334.html