如何控制多个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等格式。
55 0
|
7月前
|
前端开发 JavaScript 容器
display有哪些值?说明他们的作用?
display有哪些值?说明他们的作用?
|
4月前
|
前端开发
selenium 解决 id定位、class定位中,属性值带空格的解决办法
selenium 解决 id定位、class定位中,属性值带空格的解决办法
76 1
|
5月前
|
算法 测试技术
class062 宽度优先遍历及其扩展【算法】
class062 宽度优先遍历及其扩展【算法】
27 0
|
7月前
|
Web App开发 前端开发 开发者
关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试
关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试
38 0
|
8月前
去除“四”的避讳代码
去除“四”的避讳代码
24 0
|
10月前
|
JSON JavaScript 数据格式
查找一组数据中一组或多组数据(filter和find的区别)
查找一组数据中一组或多组数据(filter和find的区别)
57 0
|
10月前
|
搜索推荐 前端开发 JavaScript
meta标签有哪些属性和属性值?li设为行内块时有间隙怎么办?call、apply和bind的作用和区别?
`meta`标签可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。`meta`标签位于文档的头部,不包含任何内容。`meta`标签的属性定义了与文档相关联的名称/值对。
|
C++
怎么区分 const 与 * 的组合
怎么区分 const 与 * 的组合
40 0
打印列表去除[](简易循环方法)
想要print(list)结果不是这样:[1,2,3] 预期结果:共有3个数字满足,分别是:1 2 3
61 0