VUE动态绑定class类的三种常用方式及适用场景详解
更新时间：2025年01月16日 10:53:04 作者：zhangXiaoWei001
文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设计确定是否使用多个样式
前言
在实际开发中，我们会经常遇到动态绑定class的情况，常见的情况可能有：
- 根据不同的返回值渲染不同的class样式（也就是两个及两个以上的动态class选择使用）；
- UI在设计时对于某个模块的样式没有确定下来的时候我们去写这个模块（给了基础样式）；
- UI在设计对于某个模块的样式有很多样子，但不确定用是否全部使用时（给了基础样式）。
针对这三种常见的情况我们在写页面样式时可已选择这三种常见的动态加载calss的方法。
1.动态选择class样式（对象添加：情景一）
<template>
<div>
<div class="basic" :class="classObj">选择添加样式</div>
<div style="display: flex; flex-direction: column;">
<button style="width: 200px;" @click="chooseClass">选择添加cs_class1类</button>
<button class="btn" @click="chooseClass3">选择添加cs_class3类</button>
</div>
</div>
</template>
<script>
export default{
data() {
return {
classObj:{
cs_class1:false,
cs_class3:false,
},
}
},
methods:{
chooseClass(){
this.classObj.cs_class1=true
this.classObj.cs_class3=false
},
chooseClass3(){
this.classObj.cs_class1=false
this.classObj.cs_class3=true
}
}
}
</script>
<style>
.basic{
display: flex;
align-items: center;
justify-content: center;
background: pink;
width: 200px;
height: 100px;
}
.btn{
width: 200px;
margin-bottom: 20px;
}
.box_rudis{
border-radius: 30px;
}
.cs_class1{
color: red;
}
.cs_class2{
border:2px solid #0000FF
}
.cs_class3{
background: yellow;
}
</style>2.动态添加一个class样式（字符串添加：情景二）
<template>
<div>
<div class="basic" :class="boxrudius">添加一个动态样式</div>
</div>
</template>
<script>
export default{
data() {
return {
boxrudius:'box_rudis',
}
},
}
</script>
<style>
.basic{
display: flex;
align-items: center;
justify-content: center;
background: pink;
width: 200px;
height: 100px;
}
.box_rudis{
border-radius: 30px;
}
</style>3.动态添加多个class样式（数组添加：情景三）
<template>
<div>
<div class="basic" :class="classArr">添加多个动态样式</div>
<button class="btn" @click="addClassArr">动态添加多个class类</button>
</div>
</template>
<script>
export default{
data() {
return {
classArr:[],
}
},
methods:{
addClassArr(){
this.classArr=['cs_class1','cs_class2','cs_class3']
},
}
}
</script>
<style>
.basic{
display: flex;
align-items: center;
justify-content: center;
background: pink;
width: 200px;
height: 100px;
}
.btn{
width: 200px;
margin-bottom: 20px;
}
.box_rudis{
border-radius: 30px;
}
.cs_class1{
color: red;
}
.cs_class2{
border:2px solid #0000FF
}
.cs_class3{
background: yellow;
}
</style>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue子级如何向父级传递数据(自定义事件),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue中radio单选框如何实现取消选中状态问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue根据条件不同显示不同按钮的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了Vue 实现拨打电话操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家介绍了Vue3源码解读静态提升示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
在本篇文章里小编给大家分享了关于vue文件运行的方法教学内容，有需要的朋友们跟着学习下。2019-02-02
这篇文章主要为大家详细介绍了如何使用Vue实现简单的信号和电池电量组件效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-04-04
最近在研究Vuex2.0,搞了好几天终于有点头绪了。下面这篇文章主要给大家介绍了关于vue2.0学习之axios的封装与vuex的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2018-05-05
这篇文章主要介绍了如何去除element-ui中table的hover效果,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue3如何在setup中获取元素引用(ref)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
最新评论