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

目录
相关文章
|
前端开发 JavaScript 容器
display有哪些值?说明他们的作用?
display有哪些值?说明他们的作用?
158 0
|
7月前
|
前端开发
selenium 解决 id定位、class定位中,属性值带空格的解决办法
selenium 解决 id定位、class定位中,属性值带空格的解决办法
370 1
|
7月前
|
算法 测试技术
class062 宽度优先遍历及其扩展【算法】
class062 宽度优先遍历及其扩展【算法】
53 0
|
前端开发 数据库
input输入框自动消除空格
input输入框自动消除空格
111 0
消除两个inline-block元素之间的间隔
消除两个inline-block元素之间的间隔
49 0
|
前端开发 JavaScript
css控制文本超出省略(单行、两行、多行)
想要控制文本长度? 想要文本超出隐藏? 还想要不用JavaScript实现? 让我们来用css试试吧~
210 0
|
前端开发 算法 数据挖掘
如何优雅的对input框数据进行动态脱敏
🎈所谓的数据脱敏,是指在不影响数据分析结果的准确性前提下,对原始数据中的敏感字段进行处理,从而降低数据敏感度和减少个人隐私风险的技术措施。在现在这个大数据时代,个人隐私信息在互联网上传播的几率是很大的,因此作为前端工程师,我们很多时候也需要在视图层面对数据进行脱敏展示处理。 ## 场景
428 0
如何优雅的对input框数据进行动态脱敏
怎样去掉list里重复的数据(多种方法)
怎样去掉list里重复的数据(多种方法)
169 0
怎样去掉list里重复的数据(多种方法)
Object C学习笔记17-动态判断和选择器
  当时学习Object C的时被人鄙视了一顿,说使用.NET的思想来学Object C就是狗屎;不过也挺感谢这位仁兄的,这让我学习的时候更加的谨慎。今天的学习笔记主要记录Object C中的动态类型相关内容。
1071 0