Vue动态绑定Class的常用方式有哪些
本篇内容主要讲解“Vue动态绑定Class的常用方式有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue动态绑定Class的常用方式有哪些”吧!
第一种:基础用法
Html部分:
<div:class="active">基本用法</div>
Js部分:
data(){return{active:'active'}}第二种:三元运算绑定单个 / 数组形式绑定多个Class
Html部分:
<div:class="isBind?'active':''">三元运算</div><div:class="[isBind?'active':'',active]">使用数组</div>
Js部分:
data(){return{isBind:false,active:'active'}}第三种:计算属性绑定单个或多个Class
Html部分:
<div:class="classObject">使用计算属性</div>
Js部分:
data(){return{active:'active',finishData:'2022-10-1800:00:00'}},computed:{classObject(){return{active:this.isBind,'red-color':this.finishData!=''}}}第四种:使用函数绑定Class
Html部分:可自定义传参
div:class="bindClass(currDate,finishData)">函数绑定</div>
Js部分:可处理复杂逻辑
data(){return{currDate:'2022-10-2000:00:00',finishData:'2022-10-1800:00:00'}},methods:{//动态绑定ClassbindClass(currDate,finishData){letclassInfo={redColor:false,active:true}if(newDate(finishData).getTime()>newDate(currDate).getTime()){classInfo.redColor=true}returnclassInfo}}
到此,相信大家对“Vue动态绑定Class的常用方式有哪些”有了更深的了解,不妨来实际操作一番吧!这里是网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!