视频： 007_尚硅谷Vue技术_模板语法_哔哩哔哩_bilibili

笔记参考【Vue】基础系列（三）计算属性与监视属性 - 掘金 (juejin.cn)

1. 绑定class样式

:class="xxx" ，即 v-bind:class="xxx"，xxx为一个表达式，可以是字符串、对象以及数组。

1.1 字符串写法

适用于：类名不确定，要动态获取

<div :class="mood" @click="changeMood"></div>
  const vm = new Vue({
    el: '#root',
    data: {
      mood: 'normal'
    },
    methods: {
      changeMood() {
        const arr = ['happy', 'sad', 'normal']
        const index = Math.floor(Math.random() * 3)
        this.mood = arr[index]
      }
    },
  })

1.2 数组写法

适用于：要绑定多个样式，个数不确定，名字也不确定，可以随时删除或添加某个样式

<div class="basic" :class="classArr">{{name}}</div>
  const vm = new Vue({
    el: '#root',
    data: {
      name: 'zhuozhuo',
      classArr: ['yk1', 'yk2', 'yk3']
    }
  })

1.3 对象写法

适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

<div class="basic" :class="classObj">{{name}}</div>
  const vm = new Vue({
    el: '#root',
    data: {
      name: 'zhuozhuo',
      classObj: { yk1: true, yk2: false, yk3: true }
    }
  })

2. style绑定

:style="xxx"，其中xxx为合法的表达式，因此里面的样式属性要改为小驼峰样式

一般用class绑定修改样式， style绑定用的比较少

:style="{ color: activeColor, fontSize: fontSize + 'px' }"

其中 activeColor/fontSize 是 data 属性

2.1 对象写法

<div class="basic" :style="styleObj, styleObj2">{{name}}</div>

const vm = new Vue({ 
    el: '#root', 
    data: { 
        name:'zhuozhuo',
        styleObj: { fontSize: '40px', color: 'red', }, 
        styleObj2: { backgroundColor: 'orange' }, 
    }, 
})

2.2 数组写法

<div class="basic" :style="styleArr">{{name}}</div>

const vm = new Vue({ 
    el: '#root', 
    data: { 
        name:'zhuozhuo',
        styleArr: [
            { fontSize: '40px', color: 'blue', }, 
            { backgroundColor: 'gray' } 
        ]
    }, 
})

【Vue 尚硅谷学习笔记（四）】class与style样式绑定