vue2 :class使用
时间: 2023-07-22 22:15:16 浏览: 63
在 Vue2 中,:class 指令用于绑定一个或多个类名到一个元素上。:class 指令可以接受一个对象或一个数组作为值,来动态地切换类名。
以下是一个使用 :class 绑定类名的例子:
```
<template>
<div :class="{ 'active': isActive }"></div>
</template>
<script>
export default {
data() {
return {
isActive: true
}
}
}
</script>
<style>
.active {
color: red;
}
</style>
```
在这个例子中,我们定义了一个名为 isActive 的数据属性,并将其绑定到 :class 指令中。当 isActive 为 true 时,元素会自动添加类名 active,从而触发样式效果。当 isActive 为 false 时,元素会移除类名 active。
除了对象,:class 指令还可以接受一个数组作为值。数组中的元素可以是字符串或对象,用于动态地切换多个类名。
以下是一个使用 :class 绑定多个类名的例子:
```
<template>
<div :class="[ 'foo', barClass ]"></div>
</template>
<script>
export default {
data() {
return {
barClass: 'bar'
}
}
}
</script>
<style>
.foo {
color: red;
}
.bar {
font-size: 16px;
}
</style>
```
在这个例子中,我们定义了一个名为 barClass 的数据属性,并将其绑定到 :class 指令中的数组中。数组中包含了字符串 foo 和数据属性 barClass,用于动态地切换多个类名。当 barClass 的值发生变化时,元素会自动添加或移除对应的类名,从而触发样式效果。