【微信小程序常见问题】三元运算符设置失败的原因及解决方案

最新推荐文章于 2023-11-02 14:51:48 发布
原创 最新推荐文章于 2023-11-02 14:51:48 发布 · 6.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Web前端 #互联网 #前端开发 #微信小程序 #编程语言

本文探讨了微信小程序中使用三元运算符设置display属性时遇到的问题。当display值为true或false时，调试界面解析的代码显示异常。同时，文章列举了错误的三元运算符写法，指出在这种情况下，class值总是为空，为开发者提供了解决此类问题的参考。

1、三元运算符正确写法


  • 如果我们把display设置为true，调试界面解析后的代码

  • 如果我们把display设置为false，调试界面解析后的代码

2、三元运算符错误写法


最低0.47元/天 解锁文章
微信小程序开发的学习资料收集
zhan9le的博客
06-28 1万+
小程序开发学习资料集合
微信小程序入门笔记（一）
tian_98的博客
12-25 3640
day 01 1.微信公众平台 https://mp.weixin.qq.com/ 品牌，营销 1.1微信公众平台概念 微信公众平台，简称公众号。曾命名为“官号平台”、“媒体平台”、微信公众号，最终定位为“公众平台”，无疑让我们看到一个微信对后续更大的期望。 利用公众账号平台进行自媒体活动，简单来说就是进行一对多的媒体性行为活动，如商家通过申请公众微信服务号通过二次开发展示商家微官网、微会员、微推送、微支付、微活动、微报名、微分享、微名片等，已经形成了一种主流的线上线下微信互动营销方式。 1.2微信公众
小程序三目运算绑定数据无效
君王羔羊
07-25 810
改之前，点击下面图标颜色不会改变，改之后可以，原因在于绑定数据写法不一样，{{}}里面有数据绑定直接写变量名即可，不用加引号和大括号 <view class="action text-{{PageCur==item.PageCur?'green':'gray'}}" bindtap="NavChange" data-cur="{{item.PageCur}}" wx:for="{{indexList}}"> <view class="cuIcon-{{item.icon}}{.
小程序开发总结日记（二）——三元运算符在微信小程序前端的具体应用（控制页面元素样式与显示）
辣笔小茶的博客
06-23 2966
说明：问号前为条件表达式，判断结果为型，为时执行表达式1，为时执行表达式2。作用近似于的逻辑运算。在小程序前端 wxml 文件，虽然也能使用if..else..来进行条件渲染（ wx:if ），但结构却稍显复杂，相比来说在理解原理后，使用三元运算符不仅代码简单，逻辑上也更显清晰，代码风格更优雅。（还有什么能比只写一行代码就能搞定一件事情更轻松惬意？
微信小程序动态渲染类名无效
小柒的博客
03-26 1341
无效原因：三元表达式所动态渲染的类名是字符类型必须为类名添加' '引号 正确写法 <view wx:key="idx" wx:for-index="idx" wx:for="{{goodses}}" class="content {{(idx%2)==0?'content_left':''}}"></view> 错误写法 <view wx:key="idx" ...
uniapp 运行微信小程序报错：Bad attr data-event-opts with message
iuvc的博客
11-02 1302
造成原因：代码中含有 :key=“i+‘_value’”，改成:key=“i”。ps：如果觉得key值会重复，则自己在js数据内找个或新加个不重复的key值。最近使用uniapp 多端编译，运行小程序环境时，报错。
小程序三元参数判断
qq_38026437的博客
09-26 3195
记录一下新手容易弄混的 多次三元比较 其实就是 if else 的简写，true 就是 ←     false 就是 → 例子： css .cr{ color: red; } .cb{ color: blue; } .cy{ color: yellow; } html: &lt;view class='{{ c1 ? "cr":"cb"}}'&gt; c1有值 &lt...
微信小程序收藏功能的实现代码
08-27
微信小程序收藏功能的实现代码详解 微信小程序收藏功能的实现代码是指在小程序中实现点击收藏后显示已收藏，并在另一个页面出现目前点击收藏的项目的功能。本文将详细介绍微信小程序收藏功能的实现代码的技术要点和...
微信小程序实现收藏功能的代码
最新发布
11-17
本文对微信小程序收藏功能的具体代码进行了详细解析。通过数据绑定与缓存机制，实现了点击收藏后的展示效果及目标操作触发。 一、功能需求分析 本实现重点解决两个关键问题：一是优化点击收藏后的显示效果；二是明确...
微信小程序中 三元表达式
热门推荐
林中明月间丶
06-03 1万+
<text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}" <view>{{status==1?"微信小程序":"支付宝小程序"}}</view> style和三元表达式的结合使用 （注意单双引） <view style="display: {{ 条件? 'block...
uniapp踩坑之小程序：使用async调用接口并且判断点击事件传参
意初的博客
11-16 1153
bug如下，‘GET http://123.123.123.xxx/api/xxx/xxx/List?Id=null 400 (Bad Request)’，说明web页传参的方法在小程序里不好使，所以我们要使用特别的处理方法进行传参。使用this.$forceUpdate()里包裹关于视图的数据即可。小Demo，大致思路如下。：小程序不兼容直接在函数上传参，使用时需要在调用api接口处内置解构传值。uniapp踩坑：页面视图不更新，拿不到最新数据_意初的博客-优快云博客。小dome，逻辑思路如下。
uni-app 三元运算动态计算class，数据改变后不生效，不再动态计算
itlsq的博客
04-08 2954
uni-app 三元运算动态计算class，数据改变后不生效，不再动态计算
关于 小程序 style 动态数据 用 三元表达式：出现bug
weixin_45379180的博客
09-05 807
style=“padding-top:{{type==2 ? ‘0’ : ‘94rpx’}}” ** 原因很简单 ，“ ” ，双引号 必须保持在 同一行 。。 **
:class 三元运算符出错
yuxinSir的博客
10-13 587
好久没看vue官网忘记了 vue中动态绑定class使用三元运算符需加[] :class = '[data.label == '视频监控' ? 'three' : '']'
微信小程序开发常见问题总结
liuyunyihao的博客
04-09 3516
最近在做微信小程序开发，遇到了一些常见的问题，现总结一下。 1、text标签文字首行缩进。 .testText{ text-indent:2em; } 2、改变radio的默认大小。 radio { transform:scale(0.6); } 3、三目运算不起作用。 问题原因：标签属性值一定要用双引号，单引号会导致里面的三目运算不起作用。 <!-- 这是错误的 --> <button clas...
uniapp使用三元运算符动态绑定元素的style样式
qq_43671018的博客
07-27 2832
现在回到第一种方法，如果我们想要设置一个按钮，点击按钮同步改变style样式，有两种方式，改变其class或者style，但是我们都可以使用三运表达式来实现两种样式的切换。这是由于在Vue模板中，动态绑定样式时需要使用对象语法，通过将样式对象放在一个数组。中来动态绑定，这样做才可以确保样式对象被正确地解析和应用。，如果只是想动态绑定。
uniapp中style里三元运算符的写法
花儿为何这样红
08-05 1万+
style：有个括号要注意 <text class="title" :style="'filter:grayscale('+(funding>'0'?'100%':'0')+')'" style="color:red;">{{title}}</text> class：中括号要注意 <i class="iconfont " :class="[isShow=='...
微信小程序中的按钮怎么隐藏？
05-25
### 微信小程序中隐藏按钮的实现方式 在微信小程序开发过程中，可以通过多种方式实现按钮的隐藏功能。以下是几种常见的实现方法： #### 方法一：通过 `style` 属性直接设置 `display: none` 可以直接在 WXML 文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值