vue、uniapp、微信小程序在class上添加判断的语法

简介: vue、uniapp、微信小程序在class上添加判断的语法

一、vue和uniapp在class上添加判断的语法基本一致,在动态的class上做三元判断


语法:

:class="status?'name_1':'name_2'"

如果说需要在class上添加多个类名,则可以这么写:

1. // 需要在class前加:   =>   :class="" 
2. // 判断token是否等于1  等于1 则给class设置两个类名 => class="name_1 addName" 否则类名为=>class="name_2"
3. <view :class="token==1?'name_1 addName':'name_2'"></view>

二、微信小程序的class添加判断


与uniapp不同的是,原生微信小程序上做判断需要使用{{ }},此外,设置多个类名可以在插值表达式外部,并且不需要在class前加:,语法为:class=" "

<view class="addName{{token==1?'name_1':'name_2'}}">
目录
相关文章
|
5月前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
75 11
|
5月前
|
JavaScript
Vue3中路由跳转的语法
Vue3中路由跳转的语法
149 58
|
4月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
562 3
|
4月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
95 0
微信小程序更新提醒uniapp
|
4月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
78 2
|
4月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
746 0
|
4月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
168 0
|
4月前
|
小程序
uniapp实现微信小程序隐私协议组件封装
uniapp实现微信小程序隐私协议组件封装
82 0
|
6月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
209 0
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
6月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
225 0
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装