如何控制多个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
H5唤起手机打电话(拨号)和发短信功能
H5唤起手机打电话(拨号)和发短信功能
753 0
|
存储 测试技术 BI
软件体系结构 - 系统分析与设计(2.面向对象方法)
【4月更文挑战第6天】软件体系结构 - 系统分析与设计(2)
244 0
|
存储 前端开发 JavaScript
深入理解React Fiber架构及其性能优化
【10月更文挑战第5天】深入理解React Fiber架构及其性能优化
445 1
|
人工智能 IDE Devops
当「软件研发」遇上 AI 大模型
大模型和软件工具链的结合,使软件研发进入下一个时代。那它第一个落脚点在哪?实际上就是辅助编程,所以我们就开始打造了通义灵码这款产品,它是一个基于代码大模型的的 AI 辅助工具。本文会分为三个部分来分享。第一部分先介绍 AIGC 对软件研发的根本性影响,从宏观上介绍当下的趋势;第二部分将介绍 Copilot 模式,第三部分是未来软件研发 Agent 产品的进展。
452 101
|
11月前
|
安全 小程序 Java
Java“AccessControlException”报错解决
Java中的“AccessControlException”通常发生在尝试访问受安全策略限制的资源时。解决方法包括:1. 检查安全策略文件(java.policy)配置;2. 确保代码具有足够的权限;3. 调整JVM启动参数以放宽安全限制。
798 1
|
SQL 关系型数据库 MySQL
【Mysql】 深入理解MySQL的执行计划
【Mysql】 深入理解MySQL的执行计划
465 4
|
监控 开发工具 数据安全/隐私保护
Windows平台如何实现多路RTSP|RTMP流合成后录像或转发RTMP服务
本文介绍了在Windows平台上实现多路RTSP/RTMP视频流的合并技术。主要应用场景包括驾考、全景摄像头以及多路会议录制等。技术实现上,文章详细展示了如何使用特定的SDK来解码并回调YUV或RGB数据,再将这些数据按照图层形式进行合成。示例代码中给出了初始化参数、设置视频帧回调函数、以及如何配置不同图层的具体步骤。最终,合成后的视频可以推送到RTMP服务器、注入到本地RTSP服务,或是直接录制为MP4文件。此外,还提供了添加实时文字水印的方法,并展示了四路视频流合成后的“四宫格”效果。
590 0
|
应用服务中间件 nginx
项目node_modules开发环境变大问题处理
项目node_modules开发环境变大问题处理
356 0
|
设计模式 JavaScript 安全
【TypeScript 技术专栏】TypeScript 性能优化与代码质量提升
【4月更文挑战第30天】探索 TypeScript 性能优化与代码质量提升:合理使用类型注解,减少不必要的类型断言,优化模块导入,避免过度封装;遵循编码规范,加强注释,运用设计模式,进行代码审查。在追求性能与质量间找平衡,通过案例分析实践优化策略,持续提升项目体验与可持续发展。一起打造优质 TypeScript 项目!
356 0
|
小程序 开发者 UED
微信小程序——使用插槽slot快捷开发
微信小程序——使用插槽slot快捷开发
888 0