V-bind 动态绑定 Class 的案例集合

目录

绑定字符串

绑定数组

绑定对象

绑定函数

---

绑定字符串

---

        示例代码如下：

<!--css部分-->  
.inactive{  
    color:#333;  
}  
.active{  
    color:purple;  
    font-weight:bold;  
}   
<!--html部分-->  
<el-row :class="className"></el-row>  
<el-button type="primary" @click="changeClassName">切换类名</el-button>  
<!--js部分-->  
data(){  
    return{  
        className:'active',// 初始化为'active'类  
    }  
},  
methods:{  
    changeClassName(){  
        // 点击时切换类名  
        this.className=this.className==='active'?'inactive':'active'  
    }  
} 

        分析：将css类名定义到data中，并直接引用到:class中，即:class="x"，此处的x为字符串。

        渲染结果：

<el-row class="active"></el-row>  

        当单击“切换类名”按钮渲染的结果是：

<el-row class="inactive"></el-row>  

绑定数组

---

        示例代码如下：

<!--css-->  
.bg-color{  
    background-color: #b3d8ff;  
}  
.font-size-22{  
    font-size:22px;  
}  
<!--html-->  
<el-row :class="[class1,class2]"></el-row>  
<!--js-->  
data(){  
    return{  
        class1:'bg-color',  
        class2:'font-size-22',