动态绑定class（vueuniapp小程序）

Posted 2021-06-19 水星记_

vue

1.1 绑定单个class

<div :class="{'active':isActive}"></div>

data() {
    return {
      isActive: true
    };
  }

渲染结果

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

1.2 绑定多个class

<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>

data() {
    return {
      isActive: true,
      hasError: true
    };
  }

渲染结果

<div class="activeOne activeTwo activeThree"></div>

1.3 数组与三元运算符结合判断选择需要的class

<view :class="[isActive?'active':'disActive']"></view>

data() { return {
      isActive: false,
    };
  }

渲染结果

<view class="disActive"></view>

1.4 表格中根据不同字段显示相对应内容

<el-table-colum label="状态">
	<template slot-scope="scope">
		<span v-if="scope.row.status == 1">无需审批</span>
		<span v-if="scope.row.status == 2">待审批</span>
		<span v-if="scope.row.status == 3">审批通过</span>
	</template>
</el-table-colum>

uniapp

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

<view class="hotVal" :class="[ {'oneTxt': this.indexs==8}]"></view>

渲染结果

<view class="hotVal oneTxt"></view>

小程序

<view class="{{ 表达式?'A':'B' }}" ></view>

<view class="container">
  <view>微信小程序动态绑定样式测试</view>
  <!-- border类给按钮添加了蓝色边框，根据data中的属性isRed，选择按钮的背景色 -->
  <button class="border {{ isRed?'red':'green' }}">按钮</button>
</view>

  data: {
    isRed: true
  }

.border {
  border: 10rpx solid blue;
  margin-top: 50rpx;
}
 
.red {
  background-color: red;
}
 
.green {
  background-color: green;
}