:class修改样式

一、绑定class样式

可以将需要动态绑定的样式和不需要动态绑定的样式分开定义，分别使用:class和class关键字定义；

1、字符串写法

后接一个字符串为表达式，能够获取到在data中定义的变量，可以实现通过修改变量修改样式；

<!-- 加了:的:class后面接的mood为表达式，能够取到变量mood -->
<div class="basic" :class="mood" @click="changeMood">{
   {name}}</div><br><br>

注意：

（1）:class后接一个字符串，适用于要绑定样式的类名不确定，需要动态指定；

（2）:class后面的字符串表示的是一个表达式(定义在data中)，可以通过methods中定义方法修改data定义的表达式实现class属性的修改；

2、数组写法

后接一个数组名，适用于要绑定的样式个数和名字都不确定，使用一个数组存储样式

<!-- 绑定class样式--数组写法，适用于：要绑定的样式个数不确定，名字也不确定  -->
<div class="basic" :class="classArr" >{
   {name}}</div><br><br>

3、对象写法

适用于绑定的样式个数确定，但不确定是否使用改样式，可以通过修改其布尔值决定是否使用

<!-- 绑定class样式--对象写法，适用于：要绑定的样式个数确定，名字确定，但是是否使用不确定  -->
<div class="basic" :class="classObj" >{
   {name}}</div><br><br>

4、内联样式对象写法

使用关键字:style将内联样式存储在data中，:style后面接一个变量，进行动态绑定 

<!-- 绑定class样式--内联样式对象写法，适用于：要绑定的样式个数确定，名字确定，但是是否使用不确定  -->
<div class="basic" :style="styleObj">{
   {name}}</div><br><br>

5、内联样式数组写法（少用）

 在数组中，将对象作为数组的一个个元素

 <!-- 少用--内联样式数组 -->
<div class="basic" :style="[styleObj,styleObj2]">{
   {name}}</div>

<script>
    Vue.config.productionTip = false

    new Vue({
        el:"#root",
        data:{
            name:"text",
            mood:"normal",
            classArr:["happy","sad"],
            classObj:{
                happy:false,
                sad:true
            },
            styleObj:{
                fontSize:'40px',
                color:'red'
            },
            styleObj2:{
                backgroundColor:'orange'
            }
        },
        methods: {
            changeMood(){
                // this.mood="happy"
                const arr = ["happy","normal","sad"]
                this.mood=arr[Math.floor(Math.random()*3)]
            }
        },
    })
</script>