前端魔法：掌握动态 class，让网页元素随心所欲

前言

当你动态的添加类名，在某个变量匹配需求时自动切换到某个类名，实现其对应的效果。这个过程就是我们常说的动态 class，今天就和大家一起聊聊前端中的动态 class。

一、对象语法

1.1 绑定单个 class

我们可以传给

v-bind:class

一个对象，以动态地切换

class

，如下案例：

<template><div><el-button@click="clickOn"v-bind:class="{'active':isActive}">点击我</el-button></div></template><script>exportdefault{data(){return{isActive:true,};},methods:{clickOn(){this.isActive =!this.isActive;},},};</script><stylescoped>.active{color: red;}</style>

实现效果

1.2 绑定多个 class

对象中也可存在多个属性，动态切换

class

，并且

:class

可以合

class

共存，如下案例：

<template><div><divclass="activeOne"v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div></div></template><script>exportdefault{data(){return{isActive:true,hasError:true,};},};</script>

渲染结果

1.3 绑定计算属性

当

:class

的表达式过长或逻辑复杂时，可以绑定一个计算属性，一般当条件多于两个时，都可以使用

data

或者

computed

，如下案例：

<template><div><div:class="taxonOne">内容内容内容</div></div></template><script>exportdefault{data(){return{isActive:true,isError:null,error:{type:"fail",},};},computed:{taxonOne(){return{taxonTwo:this.isActive &&this.error ==null,// (isActive 为 true 且 error 为 null) 类名为 taxonTwotaxonTherr:this.error &&this.error.type =="fail",// (error 不为空且 error 中的 type 值为 "fail") 类名为 taxonTherr};},},};</script><stylescoped>.taxonTwo{color: red;}.taxonTherr{color: blue;}</style>

渲染结果

二、数组语法

2.1 class 列表

当需要应用多个

class

时，可以使用数组语法，给

:class

绑定一个数组，如下案例：

<template><div><divv-bind:class="['taxonOne', 'taxonTwo']">内容内容内容</div></div></template><stylescoped>.taxonOne{color: red;}.taxonTwo{border: 1px solid blue;}</style>

渲染结果

2.2 三元运算符

使用三元表达式，根据条件切换

class

，如下案例：

<template><div><divv-bind:class="[isActive ? 'taxonOne' : 'taxonTwo']">内容内容内容</div></div></template><script>exportdefault{data(){return{isActive:false,};},};</script><stylescoped>.taxonOne{color: red;}.taxonTwo{color: blue;}</style>

**当

isActive

为

true

时的渲染结果**

**反之，当

isActive

为

false

时的渲染结果**

2.3 数组语法 + 对象语法

class

有多个条件时，这样写较为烦琐，可以在数组语法中使用对象语法，如下案例：

<template><div><divv-bind:class="[{ taxonOne: isActive }, 'taxonTwo']">内容内容内容</div></div></template><script>exportdefault{data(){return{isActive:true,};},};</script><stylescoped>.taxonOne{border: 1px solid red;}.taxonTwo{color: blue;}</style>

渲染结果

三、复合形式

你可以将

v-if/v-else-if

和

:class

相结合进行使用，如下案例：

<template><div><divv-if="state == '0'"class="taxonOne">内容内容内容</div><divv-else-if="state == '1'"class="taxonTwo">内容内容内容</div></div></template><script>exportdefault{data(){return{state:"0",};},};</script><stylescoped>.taxonOne{color: red;}.taxonTwo{color: blue;}</style>

当

state

为

0

时，渲染结果

当

state

为

1

时，渲染结果

:style

除了上面我们说到的动态

class

，我们也可以直接动态的绑定

style

，下面一起来看看如何在标签中绑定内联样式。

注意:

1. 凡是有 - 的 style 属性名都要变成驼峰式，比如 font-size 要变成 fontSize；
2. 除了绑定值，其他的属性名的值要用引号括起来，比如 fontSize:'14px' 而不是 fontSize:14px。

一、 对象形式

1.1 直接绑定

这也是最简单的一种形式，直接绑定，如下案例：

<template><div><div:style="{ color: activeColor, fontSize: fontSize + 'px' }">内容内容内容</div></div></template><script>exportdefault{data(){return{activeColor:"red",fontSize:30,};},};</script>

渲染结果

1.2 三目运算符

三目运算符主要针对变量会动态变化时切换不同的

style

会比较方便，如下案例：

<template><div><div:style="{ color: state == '0' ? 'red' : 'blue'}">内容内容内容</div><div:style="state == '1' ? 'color:red' : 'color:blue'">内容内容内容</div></div></template><script>exportdefault{data(){return{state:"0",};},};</script>

渲染结果

1.3 计算属性

当逻辑比较复杂时，可以通过绑定一个计算属性，如下案例：

<template><div><div:style="styleState(0)">内容内容内容</div></div></template><script>exportdefault{data(){return{};},computed:{styleState(){returnfunction(index){return index ==0?"color: red":"color: blue";};},},};</script>

渲染结果

二、 数组形式

2.1 直接绑定

<template><div><div:style="[styleOne, styleTwo]">内容内容内容</div></div></template><script>exportdefault{data(){return{styleOne:{border:"1px solid blue"},styleTwo:{color:"red",},};},};</script>

渲染结果

2.2 三目运算符

<template><div><div:style="[{color:(state == '0' ? 'red' : 'blue')}]">内容内容内容</div></div></template><script>exportdefault{data(){return{state:"0",};},};</script>

渲染结果

三、调用方法

同样，你也可以选择调用一个方法，如下案例：

<template><div><div:style="setStyle(0)">内容内容内容</div></div></template><script>exportdefault{data(){return{};},methods:{setStyle(index){return index ==0?"color: red":"color: blue";},},};</script>

渲染结果

拓展

以上我们展示的都是在

vue

中使用，那在别的平台该如何使用呢？其实是大同小异的，可能在语法上会有一点点的不同，下面来看看在

uniapp

和微信小程序中如何使用动态

class

。

uniapp 中的动态 class

**

:class="[{'类名':条件},{'类名':条件},{'类名':条件}]"

**

<template><view><view:class="[{'taxonOne' : index == '0'},{'taxonTwo' : index == '1'}]">内容内容内容</view></view></template><script>exportdefault{data(){return{index:"0"}},}</script><stylescoped>.taxonOne{color: red;}.taxonTwo{color: blue;}</style>

当

index

为

0

时，渲染结果

当

index

为

1

时，渲染结果

微信小程序中的动态 class

index.wxml

<viewclass="{{ state == '0' ? 'taxonOne' : 'taxonTwo' }}">内容内容内容</view>

index.js

Page({data:{state:'1'},})

index.wxss

.taxonOne{color: red;}.taxonTwo{color: blue;}

当

state

为

0

时，渲染结果

当

state

为

1

时，渲染结果