front
javascript
vue

vue样式class和style(二)

# Vue绑定html class

在绑定对象是class的时候，表达式结果的类型出了字符串外还可以是对象或数组。

# 对象语法

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {
  isActive: true,
  hasError: true
}

1
2
3
4

渲染结果：

绑定的对象可以在data中详细定义，也可以在计算属性中定义。

<div v-bind:class="classObject"></div>

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

1
2
3
4
5
6
7
8

计算属性中返回的对象

<div v-bind:class="classObject"></div>

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

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

# 数组语法

可以给绑定的class后添加一个数组

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

1
2
3
4
5

数组内放的是data数据对象。

数组可以根据条件切换列表中的 class，可以用三元表达式：

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div v-bind:class="[{ activeClass: isActive }, errorClass]"></div>

对象语法中，类名class在前，后边是判断。数组语法中，变量在前，后边跟的是类名。数组中可以再次放对象。对象名(类名)在前，数组数(数据)在前

# Vue添加style样式

# 对象语法

v-bind:style的对象语法和css语法类似。因为这里的style是js对象，所以属性要写成驼峰式。

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data:{
    activeColor:'red',
    fontSize:30
}

1
2
3
4
5

使用直接绑定一个样式对象，把样式信息数据写在data中，这样可以让模板更加清晰

<div v-bind:style="styleObject"></div>
data:{
    styleObject:{
          color:"red",
          fontSize:"12px"
     }
}

1
2
3
4
5
6
7

# 数组语法

数组语法可以将多个样式对象应用到一个元素上.

<div v-bind:style="[styleObject,baseStyles]"></div>
data:{
    styleObject:{
          color:"red",
          fontSize:"12px"
     },
    baseStyles:{
          fontSize:"18px";
          margin:"0px",
          padding:"0px"
     }
}

1
2
3
4
5
6
7
8
9
10
11
12

编辑

上次更新: 2025/04/19, 14:22:11

← 01vue基础方法和数据 03vue组件及生命周期→