vue-class与style绑定

Class 与 Style 绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求

绑定HTML Class

直接绑定

​ :class="activeClass"

对象语法

​ :class="{'属性名':'属性值'}" 传给v-bind:class一个对象，以动态地切换：class

数组语法

​ :class='[]'把一个数组传给v-bind:class，以应用一个class列表

用在组件上

​ 数组 + 对象

css:

.red {
    color: red;
}

.green {
    color: green;
}

.big {
    font-size: 52px;
}

.bc_aqua {
    background-color: aqua;
}

HTML

<div id="app">
    <!-- 直接绑定 -->
    <p :class="activeClass" class="big">Happy New Year</p>
    
    <!-- 对象语法 -->
    <p :class="{green:isGreen,big:isBig}">Happy New Year</p>
    <p :class="aa">Happy New Year</p>
    <p :class="bb">Happy New Year</p>
    
    <!-- 数组语法 -->
    <p :class="[age>18?myColor_red:myColor_green,mySize]">Happy New Year</p>
    
    <!-- 数组 + 对象 -->
    <p :class="[aa,myColor_aqua]">Happy New Year</p>
</div>

js

new Vue({
    el:"#app",
    data:{
        activeClass:"red",
        
        isGreen:true,
        isBig:true,
        aa:{
            "red":true,
            "big":false,
        }
        
        age:20,
        myColor_red:"red",
        myColor_green:"green",
        mySize:"big",
        
        myColor_aqua:"bc_aqua"
    },
    methods:{
        bb(){
            return{
                "green":this.age > 18,
                "big":true
            }
        }
    }
})

运行效果展示：

绑定HTML Style

​ 通过vue来控制样式 style

对象语法

​ :style="{样式名:‘样式值’}" 样式名如果有 - ，则改成驼峰命名法

​ :style=“obj” 样式值可以是 data 中的一个变量

数组语法

​ 可以将多个样式对象写在同一个数组中

计算属性

​ 返回一个样式对象

css

.red {
    color: red;
}

.green {
    color: green;
}

.big {
    font-size: 48px;
}

HTML

<div id="app">
    <!-- 对象语法 -->
    <p :style="{color:'red',backgroundColor:'skyblue'}">Happy New Year</p>
    <p :style="{color:activeColor,backgroundColor:'skylue'}">Happy New Year</p>
    
    <!-- 对象语法 -->
    <p :style="[aa,bb]">Happy New Year</p>
    
    <!-- 计算属性 -->
    <p :style="myStyle">Happy New Year</p>
</div>

js

new Vue({
    el:"#app",
    data:{
        activeColor:"green",
        aa:{
            color:'red',
            backgroundColor:'yellow'
        },
        bb:{
            fontSize:"52px"
        }
    },
    computed:{
        myStyle(){
            return{
                color:'green',
                background:'yellow'
            }
        }
    }
})

运行效果展示: