学习微信小程序WXML之条件渲染

原创 2018年04月16日 21:18:42

此贴为学习9 小时搞定微信小程序开发 的笔记
文档:条件渲染 · 小程序

这是一个解决今天吃什么这一大难题的一小段代码。

<!--index.wxml -->
<view>今天吃什么?</view>
<view wx:if="{{condition === 1}}">
    饺子
</view>
<view wx:elif="{{condition === 2}}">
    米饭
</view>
<view wx:else>
    面食
</view>
//index.js
Page({
    data:{
        condition: Math.floor(Math.random()*3+1)
    }
})

当页面传入的condition变量的值为1时,今天就吃饺子,当值为2时,今天就吃米饭;当为其他值时,今天就吃面食。js文件里就是condition变量生成一个1-3的随机整数。Math.random()生成0-1的浮点随机数,Math.floor()对浮点数处理来返回一个向下取整的整数。

渲染结果:
这里写图片描述

wx:if和hidden的区别

这两个都能控制元素的显示,但wx:if的条件在切换时,框架会有一个局部渲染的过程,从而确保条件块在渲染时可以销毁,并进行重新渲染。而hidden属性始终都会渲染,通过hidden属性可以控制视图上的显示或隐藏。一般来说,wx:if有更高的切换消耗,hidden有更高的初始话渲染消耗。所以如果元素要频繁切换的话,用hidden更好。

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sriting/article/details/79966557

微信小程序之携带for循环角标参数的点击事件

wx:for默认的列表下的角标是index ,data-index=&quot;{{index}}&quot; 这个属性为标记列表角标,有了它我们就能在事件中获取列表 item的角标&amp;lt;v...
  • u010943801
  • u010943801
  • 2018-04-03 10:08:14
  • 31

微信小程序wx:for循环列表渲染

列表渲染 wx:for 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。 默认数组的当前项的下标变量名默认为 index,数组当前项的变量名...
  • lachengwen
  • lachengwen
  • 2017-08-28 17:57:06
  • 4484

微信小程序的循环遍历

imgUrls:[ '../../images/slide/banner1.jpg' ], contentItems:[ &quot;../../images/...
  • milli236
  • milli236
  • 2018-03-19 17:18:17
  • 156

微信小程序的条件渲染

1,wx.if 在微信小程序中,小程序是使用wx.if="{{条件}}"来判断是否渲染该代码块,用法如下: True 也可以用wx.elif和wx.else来添加一个else块,事例如下: 1...
  • u010356351
  • u010356351
  • 2016-10-08 15:05:00
  • 1486

小程序WXML之条件渲染

wx:if 在MINA中,用来判断是否需要渲染该代码块,这个和java、C中if条件判断是一样的,语法格式: wx:if="{{condition}}",双重大括号中是条件表达式 除了wx:if...
  • zsx_xiaoxin
  • zsx_xiaoxin
  • 2016-10-14 16:55:24
  • 8238

小程序文档整理之 -- 条件渲染

条件渲染wx:if在框架中,我们用 wx:if=”{{condition}}” 来判断是否需要渲染该代码块: True 也可以用 wx:elif 和 wx:else 来添加一个 else 块: 1 ...
  • bobobocai
  • bobobocai
  • 2017-08-25 10:00:19
  • 305

微信小程序条件渲染

微信小程序条件渲染 01简单的条件渲染 代码: // pages/test/test.js Page({ data: { id:1, bol:true }, ...
  • mylovewanzi
  • mylovewanzi
  • 2018-01-18 20:55:07
  • 125

微信小程序WXML 数据绑定、列表渲染、条件渲染、模板、事件、引用用法

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 数据绑定 {{message}} // page.js Page(...
  • timtian008
  • timtian008
  • 2017-01-17 15:25:00
  • 2449

微信小程序WXML之列表渲染

这一章节我们来学习一下我们在程序中另一个重要的语法结构循环结构,在java或C中是用for关键字的,在微信小程序中也是for关键字,但是不同的是语法结构有点不同,下面我们介绍一下。 wx:for 在...
  • zsx_xiaoxin
  • zsx_xiaoxin
  • 2016-10-19 11:23:29
  • 6981

学习微信小程序WXML之条件渲染

此贴为学习9 小时搞定微信小程序开发 的笔记 文档:条件渲染 · 小程序 这是一个解决今天吃什么这一大难题的一小段代码。 &amp;lt;!--index.wxml --&amp;gt; ...
  • sriting
  • sriting
  • 2018-04-16 21:18:42
  • 28
收藏助手
不良信息举报
您举报文章:学习微信小程序WXML之条件渲染
举报原因:
原因补充:

(最多只允许输入30个字)