绑定class样式

字符串写法

适用于：样式的类名不确定，需要动态指定

1
<div class="basic" :class="mood" @click="changeMood">{{name}}</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const vm = new Vue({
    el:'#root',
    data:{
        name:'zwhy',
        mood:'normal'
    },
    methods:{
        changeMood(){
            const arr = ['happy','sad','normal']
            const index = Math.floor(Math.random()*3)
            this.mood = arr[index]
        }
    }
})

数组写法

适用于：要绑定的样式个数不确定、名字也不确定

1
<div class="basic" :class="classArr">{{name}}</div>
1
2
3
4
5
6
7
const vm = new Vue({
    el:'#root',
    data:{
        name:'zwhy',
        classArr=['happy','normal','sad']
    }
})

对象写法

适用于：要绑定的样式个数确定、名字也确定，但要动态决定用不用

1
<div class="basic" :class="classObj">{{name}}</div>
1
2
3
4
5
6
7
8
9
10
11
const vm = new Vue({
    el:'#root',
    data:{
        name:'zwhy',
        classObj:{
            happy:false,
            normal:true,
            sad:false
        }
    }
})

绑定style样式

对象写法

1
<div class="basic" :style="styleObj">{{name}}</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
const vm = new Vue({
    el:'#root',
    data:{
        name:'zwhy',
        styleObj:{
            fontSize: '40px',
            color:'red',
        },
        styleObj2:{
            backgroundColor:'orange'
        }
    }
})

数组写法

1
<div class="basic" :style="styleArr">{{name}}</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const vm = new Vue({
    el:'#root',
    data:{
        name:'zwhy',
        styleArr:[
            {
                fontSize: '40px',
                color:'blue',
            },
            {
                backgroundColor:'gray'
            }
        ]
    }
})

总结

  1. class样式
    写法:class=”xxx” xxx可以是字符串、对象、数组。
    字符串写法适用于：类名不确定，要动态获取。
    对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。
    数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。
  2. style样式
    :style=”{fontSize: xxx}”其中xxx是动态值。
    :style=”[a,b]”其中a、b是样式对象。