如何控制多个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

目录
相关文章
|
6月前
|
存储 编解码 前端开发
Base64编码与打印标签(label)实例
在本篇文章,我们认识什么是Base64编码格式,以及它内部的编码规则;也列举了base64的常用使用场景以及注意方面,同时也列举了实际场景使用与代码示例。最后列举几种常用base64转码为arrayBuffer,blod等格式。
142 0
|
6月前
|
前端开发
selenium 解决 id定位、class定位中,属性值带空格的解决办法
selenium 解决 id定位、class定位中,属性值带空格的解决办法
337 1
|
6月前
|
算法 测试技术
class062 宽度优先遍历及其扩展【算法】
class062 宽度优先遍历及其扩展【算法】
50 0
|
6月前
|
Java 索引
正则表达式源码分析--三个常用类--分组、捕获、反向引用--String 类中使用正则表达式的代码示例和图
正则表达式源码分析--三个常用类--分组、捕获、反向引用--String 类中使用正则表达式的代码示例和图
81 0
去除“四”的避讳代码
去除“四”的避讳代码
46 0
textarea文本域控制字数多少(带数字,数字减小)demo效果示例(整理)
textarea文本域控制字数多少(带数字,数字减小)demo效果示例(整理)
|
JSON JavaScript 数据格式
查找一组数据中一组或多组数据(filter和find的区别)
查找一组数据中一组或多组数据(filter和find的区别)
91 0
C++ -- list类模拟实现
C++ – list类模拟实现 0. list类成员变量和节点
84 0
|
存储
编写一个应用程序,在主类Test1类中,创建两个链表List&lt;E&gt;对象,分别存储通过键盘输入的字符串内容
编写一个应用程序,在主类Test1类中,创建两个链表List&lt;E&gt;对象,分别存储通过键盘输入的字符串内容
77 0