如何控制多个class添加或去除

简介: 如何控制多个class添加或去除

如何控制多个class添加或去除

问题引入:

最近在开发一个小程序项目,在控制css样式的时候遇到个问题

微信小程序的class属性中的花括号内{{}}根据条件设置多个class

微信小程序本身没有document或者window这些我们平时写html的东西

就只能通过数据绑定,在改变数据这个方式了

如以下的代码:

<view class="{{istext?'class1':'class2'}}">hello world</view>
 data: {
    istext:true
 }
引入默认的class
<view class="class3 {{istext?'class1':'class2'}}">hello world</view>
<div :class="[ 'show', current==inx ? 'active' : ' ' ]"></div>
动态控制多个class

只要在花括号内做三元运算选择相应的class,他们之间用空格隔开就好

<view class="{{}}  {{}}  {{}}">hello world</view>
动态控制class
<el-table-column
    prop="is_admin"
    width="480"
    label="授权应用">
    <template slot-scope="scope">
        <div :class="[item.admin == true ? 'warBgc' : 'warUseTab']" v-for="(item, inx) in scope.row.app_pms" :key="inx">{{ item.username }}</div>
    </template>
</el-table-column>

原文链接小程序动态控制多个class

目录
相关文章
|
5月前
|
存储 编解码 前端开发
Base64编码与打印标签(label)实例
在本篇文章,我们认识什么是Base64编码格式,以及它内部的编码规则;也列举了base64的常用使用场景以及注意方面,同时也列举了实际场景使用与代码示例。最后列举几种常用base64转码为arrayBuffer,blod等格式。
115 0
|
12月前
|
前端开发 JavaScript 容器
display有哪些值?说明他们的作用?
display有哪些值?说明他们的作用?
101 0
|
5月前
|
前端开发
selenium 解决 id定位、class定位中,属性值带空格的解决办法
selenium 解决 id定位、class定位中,属性值带空格的解决办法
244 1
|
5月前
|
JavaScript 前端开发 开发者
div 元素的 tab-index 属性被设置为 -1,意味着什么
div 元素的 tab-index 属性被设置为 -1,意味着什么
|
5月前
|
算法 测试技术
class062 宽度优先遍历及其扩展【算法】
class062 宽度优先遍历及其扩展【算法】
39 0
|
11月前
|
前端开发 数据库
input输入框自动消除空格
input输入框自动消除空格
94 0
|
Web App开发 前端开发 开发者
关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试
关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试
去除“四”的避讳代码
去除“四”的避讳代码
39 0
|
JSON JavaScript 数据格式
查找一组数据中一组或多组数据(filter和find的区别)
查找一组数据中一组或多组数据(filter和find的区别)
86 0
怎样去掉list里重复的数据(多种方法)
怎样去掉list里重复的数据(多种方法)
162 0
怎样去掉list里重复的数据(多种方法)