Vue：绑定样式

Vue：绑定样式

一、绑定class样式

1、字符串写法

绑定样式需要使用 :class这个属性，可以通过data中的属性指定class样式的名字

如下案例是当点击这个div的时候，样式就会追加的happy就会更改为bad

    <div id="root">
        <div class="base" :class="mood" @click="changeMood">{{name}}</div>
    </div>

    new Vue({
        el:'#root',
        data:{
            name:'Hello World',
            mood:"happy"
        },
        methods: {
            changeMood(){
                const arr = ['happy', 'bad', 'norlly'];
                //三种样式随机一种
                const index = Math.floor(Math.random()*3);
                this.mood = arr[index]
            }
        },
        
    })

这种写法适用于类名不确定，需要动态指定

---

2、数组写法

所谓数组写法，也就是将class样式名写在一个数组里面

<div class="base" :class="arr" @click="changeMood">{{name}}</div>

 new Vue({
        el:'#root',
        data:{
            name:'Hello World',
            mood:"happy",
            arr:['happy', 'bad', 'norlly']
        },
        methods: {
            changeMood(){
                const arr = ['happy', 'bad', 'norlly'];
                //三种样式随机一种
                const index = Math.floor(Math.random()*3);
                this.mood = arr[index]
            }
        },
    })

这种写法适用于绑定的样式不确定，名字也不确定的情况

这样就可以利用数组的性质，对数组里面的数据进行增加或者删除

---

3、对象写法

对象写法就是将class绑定的是一个对象

对象里面的是一对对的键值对

键为样式名，值为波尔类型

当布尔类型为true，这个样式添加到div中，反之不添加

 <div class="base" :class="classObj" @click="changeMood">{{name}}</div>

    new Vue({
        el:'#root',
        data:{
            name:'Hello World',
            mood:"happy",
            arr:['happy', 'bad', 'norlly'],
            classObj:{
                happy:false,
                bad:false,
                norlly:true
            }
        },
        methods: {
            changeMood(){
                const arr = ['happy', 'bad', 'norlly'];
                //三种样式随机一种
                const index = Math.floor(Math.random()*3);
                this.mood = arr[index]
            }
        },
        
    })

这种写法适用于绑定样式个数缺点、名字也确定，但是需要动态决定用不用的情况

---

二、绑定style样式

使用Vue绑定style样式，需要将属性改为驼峰命名

也就是说，比如font-size改为驼峰命名则是fontSize

---

1、对象写法

将需要添加的style属性添加到一个对象中

<div class="base"  :style="styleObj">{{name}}</div>

    new Vue({
        el:'#root',
        data:{
            name:'Hello World',
            styleObj:{
                fontSize: '40px'
            }
        }   
    })

---

2、数组写法

将需要添加的style属性以对象的形式添加到一个数组中

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

    new Vue({
        el:'#root',
        data:{
            name:'Hello World',
            styleArr:[
                {
                    fontSize:'40px',
                    color:'blue'
                },
                {
                    backgroundColor:'green'
                }
            ]
        }   
    })

---

三、总结

在实际开发中，绑定class样式使用频率更高，绑定style样式的使用频率较小