vue.js 速成课程(5)：动态类和计算属性

绑定 HTML 类

数据绑定的一个常见需求是操作元素的类列表及其内联样式。由于它们都是属性，我们可以使用 v-bind 来处理它们：我们只需要用表达式计算最终字符串即可。

但是，干预字符串连接很烦人，而且容易出错。因此，当 v-bind 与类和样式一起使用时，Vue 提供了特殊的增强功能。除了字符串之外，表达式还可以计算为对象或数组。

我们可以将对象传递给 v-bind:class 来动态切换类：

<div :class="{ active: person.isActive }">This is the menu option</div>

在该示例中，仅当 Vue 数据对象 person.isActive 等于 true 时，Vue 才会将类设置为“active”

绑定对象不必是内联的。你可以直接引用整个对象：

<div :class="classObject">This is the menu option</div>

Vue 将用等于 true 的对象属性替换 classObject：

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

计算属性

计算属性允许我们定义一个与数据使用方式相同的属性，但也可以有一些基于其依赖项缓存的自定义逻辑。你可以将计算属性视为数据的另一种视图。

const app = Vue.createApp({
    data() {
        return {
            people: [
                {
                    name: "William Taylor",
                    email: "William@example.com",
                    isActive: true,
                },
                {
                    name: "John Carson",
                    email: "john@example.com",
                    isActive: false,
                },
                {
                    name: "Peter Sanders",
                    email: "peter@exemple.com",
                    isActive: true,
                },
            ],
        };
    },
    computed: {
        activePeople() {
            return this.people.filter((person) => person.isActive);
        },
    },
});

该计算属性可以像数据一样使用：

<div v-for="person in activePeople" :key="person.name">
    {{ person.name }} : {{ person.email }}
</div>

---

相关文章：

• vue js 速成课程(1)：第一步
• vue js 速成课程(2)：按钮点击
• vue js 速成课程(3)：条件渲染
• vue js 速成课程(4)：v-for 和 v-bind
• vue js 速成课程(5)：动态类和计算属性