vue在模板中输出class的几种方法
在Vue中，可以通过以下方式在模板中输出class：
- 字符串形式：在这种方式下，class属性值是一个字符串，可以在其中用空格分隔多个class名称。
<div class="class1 class2">{{ message }}</div>- 数组形式：在这种方式下，class属性值是一个数组，数组中的每个元素都是一个class名称，可以是字符串或对象。如果是对象，则可以设置一个布尔值属性来控制class是否应该存在。
<div v-bind:class="[class1, class2]">{{ message }}</div>- 对象形式：在这种方式下，class属性值是一个对象，对象的属性名是class名称，属性值是一个布尔值，控制class是否应该存在。
<div v-bind:class="{ class1: isClass1, class2: isClass2 }">{{ message }}</div>- 组件形式：在这种方式下，class属性值是直接作为组件的属性传递，在组件内部可以使用$attrs属性获取class属性值。
在对象形式中，对象属性名如果是数组中的某个值
在对象形式中，如果对象的属性名是一个变量，可以使用计算属性来动态计算属性名。例如，如果需要根据数组中的某个值来设置class名称，可以这样写：
<template>
<div v-for="item in arr" v-bind:class="getClass(item)">{{ item }}</div>
</template>
<script>
export default {
data() {
return {
arr: [1, 2, 3, 4, 5, 6],
classList: ['class1', 'class2', 'class3', 'class4', 'class5', 'class6']
};
},
methods: {
getClass(item) {
const index = this.arr.indexOf(item);
const className = this.classList[index];
return { [className]: true };
}
}
};
</script>在这个例子中，使用v-for指令遍历数组，并在每个div上绑定一个class。在v-bind:class指令中，调用了一个名为getClass的方法，该方法接受一个参数item，表示当前遍历的数组元素。
在getClass方法中，首先使用indexOf方法获取item在数组中的索引，然后使用该索引获取对应的class名称。最后，使用对象字面量语法来动态计算属性名，将class名称作为属性名，布尔值true作为属性值，返回一个对象。
这样，每个div的class将根据对应的数组元素在classList数组中的索引来确定。例如，如果arr中的某个元素为3，则它的class将为“class3”。