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

目录
相关文章
|
2月前
el-input 模糊匹配 - 单行输入
el-input 模糊匹配 - 单行输入
19 0
|
4月前
|
前端开发
selenium 解决 id定位、class定位中,属性值带空格的解决办法
selenium 解决 id定位、class定位中,属性值带空格的解决办法
216 1
|
4月前
|
算法 测试技术
class062 宽度优先遍历及其扩展【算法】
class062 宽度优先遍历及其扩展【算法】
38 0
|
4月前
|
Java 索引
正则表达式源码分析--三个常用类--分组、捕获、反向引用--String 类中使用正则表达式的代码示例和图
正则表达式源码分析--三个常用类--分组、捕获、反向引用--String 类中使用正则表达式的代码示例和图
68 0
|
10月前
|
前端开发 数据库
input输入框自动消除空格
input输入框自动消除空格
90 0
|
11月前
|
Web App开发 前端开发 开发者
关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试
关于施加在 div 标签上的 ngTemplateOutlet 指令让 div class 丢失的问题调试
|
12月前
去除“四”的避讳代码
去除“四”的避讳代码
36 0
textarea文本域控制字数多少(带数字,数字减小)demo效果示例(整理)
textarea文本域控制字数多少(带数字,数字减小)demo效果示例(整理)
|
前端开发 JavaScript
css控制文本超出省略(单行、两行、多行)
想要控制文本长度? 想要文本超出隐藏? 还想要不用JavaScript实现? 让我们来用css试试吧~
195 0