首页uniapp vfor中动态绑定class

uniapp vfor中动态绑定class

时间: 2023-07-30 22:08:22 浏览: 92

在 `v-for` 中动态绑定 `class`，可以使用 `v-bind:class` 或者简写的 `:class`。具体实现方法如下：使用 `v-bind:class`： ```html <template> <div v-for="(item, index) in list" :key="index" v-bind:class="{ active: item.isActive }">{{ item.name }}</div> </template> ``` 上面的代码中，通过 `v-bind:class` 绑定一个对象，该对象的属性名称是 CSS 类名，属性值是一个布尔值，表示是否添加该 CSS 类名。在这个例子中，如果 `item.isActive` 为 `true`，则添加 `active` 这个 CSS 类名。使用 `:class` 简写： ```html <template> <div v-for="(item, index) in list" :key="index" :class="{ active: item.isActive }">{{ item.name }}</div> </template> ``` 上面的代码和前面的代码实现的效果是一样的，只是使用了 `:class` 的简写方式。除了上面的方法，还可以使用数组语法来绑定多个 CSS 类名： ```html <template> <div v-for="(item, index) in list" :key="index" :class="[item.isActive ? 'active' : '', item.isHighlighted ? 'highlight' : '']">{{ item.name }}</div> </template> ``` 在这个例子中，通过数组语法绑定了两个 CSS 类名，如果 `item.isActive` 为 `true`，则添加 `active` 这个 CSS 类名；如果 `item.isHighlighted` 为 `true`，则添加 `highlight` 这个 CSS 类名。

阅读全文