微信小程序引用data数据的三元表达式写法

最新推荐文章于 2024-07-19 13:23:42 发布

Seven_night♛

最新推荐文章于 2024-07-19 13:23:42 发布

阅读量755

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/seve_nnight/article/details/118194806

版权

笔记专栏收录该内容

24 篇文章 1 订阅

订阅专栏

本文介绍了如何在WXML页面中使用条件判断来动态地为元素添加类名，例如当`lightIndex`等于4时，为`<text>`标签添加`active`类。同时展示了使用三元运算符改变图片路径的方法，根据`lightIndex`的值显示不同图片，以此实现页面的交互效果。

摘要由CSDN通过智能技术生成

wxml页面：

<text class="{{lightIndex==4?'active':''}}">我的</text>
//如果index等于4，则添加class  active

下为改变图片路径三元表达式写法：

<image src="{{lightIndex==4?'../../images/tab4-active.png':'../../images/tab4.png'}}" mode="widthFix"></image>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Seven_night♛

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

小程序三元参数判断

qq_38026437的博客

09-26

3109

记录一下新手容易弄混的多次三元比较其实就是 if else 的简写，true 就是 ← false 就是 → 例子： css .cr{ color: red; } .cb{ color: blue; } .cy{ color: yellow; } html: <view class='{{ c1 ? "cr":"cb"}}'> c1有值 &lt...

微信小程序数据拼接_微信小程序数据处理

weixin_34820733的博客

02-12

1857

微信小程序数据处理的核心就是js文件 Page 的 data。他是WXML 和js交互的重要桥梁，WXML 页面需要展示的数据都需要被定义在data中，否则就无法在页面进行展示。data中的数据是通过网络请求或者一些逻辑处理进行设置以及初始化的。data数据的设置有两种方式，例如我们data中的有一个name并且初始化为空data:{name:'我是初始化的name'}复制代码当有多个数据时用逗...

参与评论您还未登录，请先登录后发表或查看评论

微信小程序中 三元表达式

热门推荐

林中明月间丶

06-03

1万+

<text class="viewpager-title {{current == 0 ? 'area-selected' : ''}}" <view>{{status==1?"微信小程序":"支付宝小程序"}}</view> style和三元表达式的结合使用（注意单双引） <view style="display: {{ 条件? 'block...

DataBinding数据绑定表达式

hqb112233的博客

07-19

401

在 Android Data Binding 中，数据绑定表达式允许您在布局文件中直接使用表达式来绑定数据。这些表达式通常用于将数据从视图模型（ViewModel）绑定到视图（View）的属性上。

js--Date对象&三元表达式

m0_62168050的博客

06-20

393

js--Date对象&三元表达式

小程序的三元表达式

文龙刚的博客

04-13

274

【代码】小程序的三元表达式。

微信小程序使用三元运算符

weixin_42280309的博客

11-20

3195

针对微信小程序开发wxml中的三元运算符。

微信小程序 使用三元运算符动态渲染布局

衡与墨的博客

08-22

9475

今天在写微信小程序时，被坑到了， &amp;lt;!--.wxml-&amp;gt; &amp;lt;view class=&quot;row-in {{to_top ? 'to-top' : 'to-bottom'}}&quot;&amp;gt; ... &amp;lt;/view&amp;gt; 本意是想做一个简单的动态页面的，在用户点击按钮的时候，菜

微信小程序--模版语法

2301_80646752的博客

03-13

949

尚不能写 data 路径，也就是不支持数组和对象，例如：错误用法：要通过调用setData()方法进行修改，setData()方法接受对象作为参数，key是需要修改的数据，value是最新的值，2> es6展开运算符（通过展开运算符能够将对象中属性复制给另一个对象，后面的属性会覆盖前面的属性）例如在{{}}语法中，只能写表达式，不能写语句，也不能调用js相关的方法。

微信小程序单选框自定义赋值

10-15

三元运算符是一种简洁的条件表达式写法，格式为条件 ? 表达式1 : 表达式2。在WXML中，我们可以使用三元运算符结合绑定数据的变量来动态显示不同的类名或内容。例如，在中，根据_num变量的值动态切换类名，从而改变...

微信小程序04 数据绑定

m0_50707858的博客

03-07

1万+

一、数据绑定的基本原则 1、在data中定义数据即在页面对应的.js文件中，把数据定义到data对象中即可 2、在 wxml 中使用数据把data中的数据绑定到页面中渲染，使用Mustache（相当于插值表达式）将变量包起来即可，语法格式为： <view>{{要绑定的数据名称}}</view> 举例：在js文件中的data中定义数据： Page({ /** * 页面的初始数据 */ data: { info:'hello world' } }

微信小程序开发之三元运算符代替wx.if/wx.else

weixin_30294021的博客

05-18

291

直接上代码实现功能为：当fbphotoFirst为空时，src路径为“pic/信息反馈1-1_14.png“，并且点击事件uploadfbphotoFirst有效，否则为路径fbphotoFirst，此时点击事件uploadfbphotoFirst无效，uploadfbphotoFirst为上传图片的方法，即上传图片成功后不支持修改 <image class="uploadimag...

微信小程序学习三(wxml语法)

Kotoba209_的博客

01-17

1385

主要记录学习过程中使用次数较多的内容官方文档-框架数据绑定 wxml中的动态数据均来自对应的Page的data 简单绑定数据绑定使用Mustache语法（双大括号）将变量包起来。内容  <view> {{ message }} </view> // index.js Page({ data: { ...

三元表达式的多种写法

weixin_42867002的博客

07-17

2399

1.data?data(true):null(false) 2.var logs=wx.getStorageSync()||[] //为真返回缓存，为假返回空数组 3.logs==wx.setStorageSync('logs')&&alert('')//小程序中变量logs==缓存中的logs则执行alert

微信小程序开发五元素、运算符和表达式

u014143913的博客

10-16

852

...扩展运算符，来将一个对象展开 <template is="objectCombine" data="{{...obj1,c,d, e: 5}}"></template> Page({ data: { obj1: { a: 1, b: 2 }, c:3, d:4 } }) 最终组合对象{a: 1,...

如何获取data中的值？如何取出，存储数据？跳转外部链接？与非本机联调？修改头部标题？动态更改样式？动态获取设备宽高？（微信小程序）

weixin_43677787的博客

10-17

1569

如何获取data中的值？如何取出，存储数据？动态更改样式？动态获取设备宽高？跳转外部链接？与非本机联调？修改头部标题？（微信小程序）

三元表达式

UNDEFINED_AUBE的博客

12-14

1126

三元表达式 语法：表达式？结果1：结果2 含义：问号前面的位置是判断的条件，判断结果为boolean型，为true时执行结果1，为false2时执行结果2

三元表达式的使用方法

Mr_box_的博客

11-30

7540

1 三元表达式: 表达式?结果1：结果2；如果表达式结果为true,执行结果1，如果表达式结果为false,执行结果2. 可以理解为if else 的另外一种写法。例: var a = 10; 　　a%2==0?alert("偶数"):alert("奇数"); 三元表达式也能做一些简单的条件选择，有三元运算符组成的式子成为三元表达式 var num = 10; var result = num > 5 ? '是的' : '不是'; alert(result);

微信小程序输出data数据