vue动态绑定多个类名方法详解(:class动态绑定多个类名)

更新时间：2022年11月12日 10:48:05 作者：崽崽的谷雨

vue中可以通过:class=""这样来根据一定的条件来动态添加class,但是有时候需要判断的条件比较多,需要动态添加的class也比较多,下面这篇文章主要给大家介绍了关于vue动态绑定多个类名(:class动态绑定多个类名)的相关资料,需要的朋友可以参考下

问题描述：

今天遇到一个问题，就是一个元素要动态绑定两个或多个类名。

固定绑定多个类名方法：

绑定多个写死的类名很简单方法有如下几种：

方式一：

class 中间有空格

<div class="active vv">5555555</div>

方式二：

数组形式使用 :class 当然直接在data里声明一个变量也可以。

<div :class="['active','vv']">5555555</div>

方式三：

借用一个方法处理

<div :class="classS()">5555555</div>

methods里定义一个方法返回字符串和数组都行

 methods:{
         classS(){
           return ['vv','active'];
           // return "vv active";
         }
      }

动态绑定多个类名方法：

其实动态绑定和固定差不多，方式是一样的，无非就是需要根据变量来判断。

以下方式 data 和样式代码如下

 data() {
        return {
           bb:1,
           index:1,
           cc:1
        }
     },

.active{
  color:red;
}
.vv{
  font-size:30px;
}

方式一：

三目运算符，且以数组形式。不推荐使用这种方法，如果只有两个类名可以使用，多了的话就不好写三目运算符了。

<div :class="bb==index&&cc==index?['active','vv']:bb==index?'active':cc==index?'vv':''">55555555555</div>

方式二：

以大括号形式

<div :class="{active:bb==index,vv:cc==index}">55555555555</div>

方式三：

数组形式，每个数组项里使用判断

  <div  
:class="[{active:bb==index},{vv:cc==index}]">55555555555</div>

直接三目也可以

   <div :class="[bb==index?'active':'',cc==index?'vv':'']">55555555555</div>

方式四：

用一个方法搞定

 <div  
:class="classS1()">55555555555</div>

 classS1(){
            let v = [];
            if (this.index == this.bb) {
                v.push("active");
            }
            if (this.index == this.cc) {
                v.push("vv")
            }
            return v;
        }

总结：

方式一：

优点：写法简单

缺点：写两个以上类名时无法写且不利于阅读

方式二：

优点：写法简单

缺点：当多个时也不利于阅读

方式三：

优点：写法简单

缺点：当多个时也不利于阅读

方式四：

优点：写法简单，利于阅读，而且可以添加很多判断

缺点：无

如果是两个及两个以下方式一、方式二、方式三、方式四都可以。

如果是两个以上方式二、方式三、方式四这个我建议还是用方式四看起来很清爽。

在线示例：

vue 动态绑定多个类名

到此这篇关于vue动态绑定多个类名方法的文章就介绍到这了,更多相关vue :class动态绑定多个类名内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue插件从封装到发布的完整步骤记录
这篇文章主要给大家介绍了关于Vue插件从封装到发布的完整步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-02-02
vue中监听input框获取焦点及失去焦点的问题
这篇文章主要介绍了vue中监听input框获取焦点，失去焦点的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
Vue金融数字格式化(并保留小数)数字滚动效果实现
这篇文章主要介绍了Vue金融数字格式化(并保留小数) 数字滚动效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-04-04
Vue实现剪贴板复制功能
这篇文章主要介绍了Vue实现剪贴板复制功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-12-12
Vue实现兄弟组件间的联动效果
这篇文章主要介绍了Vue实现兄弟组件间的联动效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
element--Diaolog弹窗打开之后渲染组件方式
这篇文章主要介绍了element--Diaolog弹窗打开之后渲染组件方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
解决vue的touchStart事件及click事件冲突问题
这篇文章主要介绍了解决vue的touchStart事件及click事件冲突问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Springboot运用vue+echarts前后端交互实现动态圆环图
我们做项目的时候，常常需要一些统计图来展示我们的数据，作为web开发人员，会实现统计图是我们必会的技能。我将带大家来实现动态饼图的实现，感兴趣的可以了解一下
2021-06-06
查看vue-cli脚手架的版本号和vue真实版本号及详细操作命令
本文给大家分享如何查看vue-cli脚手架的版本号和vue真实版本号及详细操作过程，本文给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧
2022-11-11
在vue项目中使用codemirror插件实现代码编辑器功能
这篇文章主要介绍了在vue项目中使用codemirror插件实现代码编辑器功能（代码高亮显示及自动提示）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-08-08