绑定样式

# 绑定样式

样式绑定主要有以下两类

绑定class
绑定style

# 绑定class样式

绑定class有3种不同的写法

字符串形式
数组形式
对象形式

 <!-- 字符串写法 -->
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>

1
2

/* 其中normal是一个css样式
.normal{
  background-color: lightpink;
} 
*/
data: {
    mood: 'normal',
}

1
2
3
4
5
6
7
8

 <!-- 数组写法 -->
<div class="basic" :class="colorArr">{{name}}</div>

1
2

data: {
    colorArr: ['color1', 'color2', 'color3'],
}

1
2
3

 <!-- 对象写法 -->
<div class="basic" :class="classObj">{{name}}</div>
....
<script type="text/javascript">
  ....
    data: {
      classObj: {
          color1: false
      }
  	}
  ...
</script>

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

# 绑定style样式

它有2种不同写法：

对象写法
数组写法

 <!-- 对象写法 -->
<div class="basic" :style="styleObj">{{name}}</div>

1
2

data: {
    styleObj: {
        fontSize: '40px',
        color: 'red'
    }
}
//注意：如果key是一个单词就正常写即可，如果是多个单词，需要遵循驼峰写法。
//比如font-size要写成fontSize

1
2
3
4
5
6
7
8

 <!-- 对象写法  该种写法很少用了解即可-->
<div class="basic" :style="styleArr">{{name}}</div>
....
<script type="text/javascript">
  ....
    data: {
      styleArr: {
          {
            fontSize: '40px',
            color: 'red'
        	},
          {
            fontSize: '40px',
            color: 'red'
        	}
      }
  	}
  ...
</script>

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

上次更新: 2025/08/21, 15:38:29

← 计算属性跟监视属性条件渲染跟列表→