微信小程序/uniapp:class和style不生效的问题

非常重要:小程序端不支持 classObject 和 styleObject 语法。

文档:https://uniapp.dcloud.net.cn/tutorial/vue-basics.html#class-与-style-绑定

目录

    • 对象语法
    • 数组语法
    • 字符串语法
    • computed
    • 其他方案

对象语法

<!-- class -->
<view class="static" :class="{ active: isActive}">111</view>

<!-- style -->
<view :style="{ color: activeColor, fontSize: fontSize + 'px' }">333</view>

数组语法

<!-- class -->
<view class="static" :class="['activeClass', 'errorClass']">111</view>

<!-- style -->
<view :style="[{ color: activeColor, fontSize: fontSize + 'px' }]">444</view>

字符串语法

<!-- class -->
<view class="static" :class="computedClassStr">111</view>

<!-- style -->
<view :style="computedClassStr">444</view>

computed

 <!-- 支持 -->
<view class="container" :class="computedClassStr"></view>
<view class="container" :class="{active: isActive}"></view>

<!-- 不支持 -->
<view class="container" :class="computedClassObject"></view>

其他方案

使用第三方库classnames,来处理类名,可以将ClassObject转为ClassStr

具体用法可以参看:https://pengshiyu.blog.csdn.net/article/details/134287806

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/773337.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

数千万“四高”中老年患者,如何推动国产营养保健品创新

“三高”指高血压、高血糖&#xff08;糖尿病&#xff09;、高血脂&#xff0c;是中老年群体的常见病。 然而&#xff0c;除了前述三者&#xff0c;高尿酸血症在我国的患病率正逐年提高&#xff0c;已成为仅次于糖尿病的第二大代谢性疾病。痛风是高尿酸血症典型症状之一。 加上…

大华设备接入GB28181视频汇聚管理平台EasyCVR安防监控系统的具体操作步骤

智慧城市/视频汇聚/安防监控平台EasyCVR兼容性强&#xff0c;支持多协议接入&#xff0c;包括国标GB/T 28181协议、GA/T 1400协议、部标JT808协议、RTMP、RTSP/Onvif协议、海康Ehome、海康SDK、大华SDK、华为SDK、宇视SDK、乐橙SDK、萤石云SDK等&#xff0c;并能对外分发RTMP、…

Linux 文件系统以及日志管理

一、inode 与block 1. inode 与block详解 在文件存储硬盘上&#xff0c;硬盘的最小存储单位叫做“扇区”&#xff0c;每个为512字节。 操作系统读取硬盘的时候&#xff0c;不会一个个扇区地读取&#xff0c;这样效率太低&#xff0c;而是一次性连续读取多个扇区,即一次性读取…

pytest-yaml-sanmu(七):使用fixture返回值

fixture 是 pytest 中非常重要的功能&#xff0c;大部分项目都可能会用到 fixture。 pytest 的内置标记 usefixtures 可以帮助用例自动的使用 fixture 1. 创建 fixture pytest 中的 fixtures 大致有两个用途 在用例执行之前、执行之后&#xff0c;自动的执行 通过 fixture …

基于FreeRTOS+STM32CubeMX+LCD1602+AD5621(SPI接口)的DAC控制输出Proteus仿真

一、仿真原理图: 二、运行效果: 三、STM32CubeMX配置: 1)、GPIO配置: 2)、freertos配置: 四、软件部分: 1)、main主函数: /* USER CODE BEGIN Header */ /** ****************************************************************************** * @file …

(二)Java 线程

一、创建和运行线程 程序在启动时&#xff0c;默认就已经存在了一个主线程&#xff0c;如果想要在主线程之外创建线程&#xff0c;有以下几种方式&#xff1a; 1.1 直接使用 Thread // 创建线程对象 Thread t new Thread(){Overridepublic void run() {// 要执行的任务} };…

加密(3)非对称加密

一、介绍 1、概念 非对称加密&#xff0c;又称现代加密算法&#xff0c;非对称加密是计算机通信安全的基石&#xff0c;保证了加密数据不会被破解。加密和解密使用的是两个不同的密钥&#xff0c;这种算法叫作非对称加密算法。 2、示例 首先生成密钥对, 公钥为(5,14)&#…

Redis基础教程(七):redis列表(List)

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…

Redis-Redis可视化工具Redis Insight下载及安装

下载 1、博主已经上传资源&#xff0c;点此下载 2、点此进入官方下载 2.1 点击Installing Redis Insight 2.2 点击Install on desktop 2.3 选择Install on desktop&#xff0c;点击Redis Insight is available for download for free from this web site从网站下载 2.4 下载…

中小企业适用的HTTPS证书

在当今数字化时代&#xff0c;企业的网站安全及其数据传输的安全是至关重要的。对于中小企业而言&#xff0c;选择适合的HTTPS证书&#xff08;即SSL证书&#xff09;是确保网站通信安全、增强用户信任和保护企业数据不可或缺的一步。下面将围绕中小企业适用的HTTPS证书进行深入…

【CT】LeetCode手撕—4. 寻找两个正序数组的中位数

目录 题目1- 思路2- 实现⭐4. 寻找两个正序数组的中位数——题解思路 3- ACM 实现 题目 原题连接&#xff1a;4. 寻找两个正序数组的中位数 1- 思路 思路 将寻找中位数 ——> 寻找两个合并数组的第 K 大 &#xff08;K代表中位数&#xff09; 实现 ① 遍历两个数组 &am…

【LeetCode:3033. 修改矩阵 + 模拟】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

如何在Qt使用uchardet库

如何在 Qt 中使用 uchardet 库 文章目录 如何在 Qt 中使用 uchardet 库一、简介二、uchardet库的下载三、在Qt中直接调用四、编译成库文件后调用4.1 编译工具下载4.2 uchardet源码编译4.3 测试编译文件4.4 Qt中使用 五、一些小问题5.1 测试文件存在的问题5.2 uchardet库相关 六…

GaussDB关键技术原理:高性能(四)

GaussDB关键技术原理&#xff1a;高性能&#xff08;三&#xff09;从查询重写RBO、物理优化CBO、分布式优化器、布式执行框架、轻量全局事务管理GTM-lite等五方面对高性能关键技术进行了解读&#xff0c;本篇将从USTORE存储引擎、计划缓存计划技术、数据分区与分区剪枝、列式存…

Appium环境搭建,华为nova8鸿蒙系统(包括环境安装,环境配置)(一)

1.安装代码工具包 appium python client pip install appium-python-client 2.安装JDK 参考链接: ant+jmeter+jenkins从0实现持续集成(Windows)-CSDN博客 3.下载并安卓SDK 下载地址:AndroidDevTools - Android开发工具 Android SDK下载 Android Studio下载 Gradle下载…

MySQL 8.0 架构 之 中继日志(Relay log)

文章目录 MySQL 8.0 架构 之 中继日志&#xff08;Relay log&#xff09;中继日志&#xff08;Relay log&#xff09;概述相关参数参考 【声明】文章仅供学习交流&#xff0c;观点代表个人&#xff0c;与任何公司无关。 来源|WaltSQL和数据库技术(ID:SQLplusDB) MySQL 8.0 OCP …

vue+openlayers之几何图形交互绘制基础与实践

文章目录 1.实现效果2.实现步骤3.示例页面代码3.基本几何图形绘制的关键代码 1.实现效果 绘制点、线、多边形、圆、正方形、长方形 2.实现步骤 引用openlayers开发库。加载天地图wmts瓦片地图。在页面上添加几何图形绘制的功能按钮&#xff0c;使用下拉列表&#xff08;sel…

【java高级】【算法】通过子节点 反向获取 树路径父节点 且不获取无关节点

有一个奇葩需求 要求 用户配置在某选择框的选项 例如 然后在选择时显示 用户配置的选项 依旧是返回树,但是只包含 选择的子节点。 以及涉及的父节点,树路径 不返回无关节点 【一般】我们开发中都是直接通过 树节点 返回 其下子节点 这个需求的确很奇葩。 而且还要考…

语音大模型引领自然交互新时代,景联文科技推出高质量语音大模型数据库

近期&#xff0c;OpenAI正式发布语音大模型GPT-4o&#xff0c;可以综合利用语音、文本和视觉信息进行推理&#xff0c;扮演一个个人语音交互助手。 在音频处理方面&#xff0c;它不仅能识别和转录多种口音和方言&#xff0c;改变语音的速度音调和振动&#xff0c;还能进行声音模…

CAS(compare and swap)

文章目录 CAS 的应用标准库的原子类自旋锁 CAS的ABA问题什么是 ABA 问题ABA 问题引来的 BUG相关面试题 CAS是一条CPU指令,就可以完成比较和交换这样的操作 我们假设内存中的原数据V&#xff0c;旧的预期值A&#xff0c;需要修改的新值B。 1.比较 A 与 V 是否相等。&#xff08;…