模板语法

# css样式class的多种用法

操作HTML元素的class列表和内联样式是数据绑定的一个常见需求。所以Vue可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

# 1.对象语法

<div :class="{active:true}">class样式</div>

也可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的class属性共存。代码示例如下：

<div :class="{active:true,’my-box’:isBox}">class样式</div>

1
2
3
4
5

绑定的数据对象不必内联定义在模板里，在data方法里面定义一个对象也可以。代码如下：

<div :class="objClass">class样式</div>
data(){
     return {
       objClass:{
         active:true,
          'my-box':true
        }
      }
   }

1
2
3
4
5
6
7
8
9

我们也可以在这里绑定一个返回对象的computed计算属性。这是一个常用且强大的模式，代码如下：

<div :class="objClass">class样式</div>
data(){
  return {
    isActive:true,
    isBox:true
  }
},
computed:{
    objClass(){
        return {
            active:this.isActive,
            'my-box':this.isBox
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 2.数组语法

v-bind:class除了可以传递对象外，还可以传递一个数组，代码如下：

<div :class="[activeClass,myBox]">class样式</div>
data(){
   return {
      activeClass:'active',
      myBox:'my-box'
     }
 }

1
2
3
4
5
6
7

如果你也想根据条件切换列表中的 class，可以用三元表达式，代码如下：

<div :class="[isActive?activeClass:'',myBox]">class样式</div>
data(){
  return {
    activeClass:'active', 
    myBox:'my-box',
    isActive:true
      }
 }

1
2
3
4
5
6
7
8

在数组语法中也可以使用对象语法，代码如下：

 <div :class="[{activeClass:true},myBox]">class样式</div>

#Vue基础

上次更新: 2022/05/30 12:17:36

← 事件修饰符与按键修饰符内联style→