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项目和小程序，发现二者有许多相同之处，在此想总结一下二者的共同点和区别,需要的朋友可以参考下2018-08-08
Vue中的Slot对于编写可复用可扩展的组件是再合适不过了,下面这篇文章主要给大家介绍了关于Vue插槽slot详细介绍的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要给大家介绍了关于Vue前端生成UUID的相关资料,前端需要生成一个唯一标识符作为ID时,可以使用Vue UUID插件,比如生成订单号、用户ID等等,需要的朋友可以参考下2023-09-09
今天小编就为大家分享一篇vue单页应用在页面刷新时保留状态数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vuex的插件vuex-persistedstate数据持久化存储操作
这篇文章主要介绍了Vuex的插件vuex-persistedstate数据持久化存储操作,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-12-12
Pinia是Vue 3的专属状态管理库,旨在替代Vuex,提供更简单、直观的状态管理解决方案,它支持组合式API和选项式API,允许跨组件或页面共享状态,避免了Vuex中的许多复杂概念,本文介绍Vue中Pinia的各种详细说明和使用示例,感兴趣的朋友一起看看吧2025-01-01
VueQuillEditor富文本上传图片(非base64)
这篇文章主要介绍了VueQuillEditor富文本上传图片(非base64),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
Vue是一款流行的前端框架，支持过渡动画的实现是其中的一项重要特性，在Vue中，使用过渡动画可以为用户提供更加友好的用户体验，下面我将为大家介绍一下子如何在Vue中实现过渡动画,需要的朋友可以参考下2023-06-06
这篇文章主要介绍了vue项目中访问本地json数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
ant desing vue table 实现可伸缩列的完整例子
最近在使用ant-design-vue做表格时，遇到要做一个可伸缩列表格的需求，在网上一直没有找到好的方法，于是小编动手自己写个可以此功能，下面小编把ant desing vue table 可伸缩列的实现代码分享到脚本之家平台供大家参考2021-05-05
最新评论