欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
欢迎加入团队圈子！与作者面对面！直接点击！
在开发微信小程序的时候，有时我们需要根据条件来决定一些内容是否渲染（显示或隐藏）
例如当条件为true时，view组件会渲染出来，为false时，不会渲染出来。
1.wx:if的使用
第一种直接传入：
<view wx:if="{{true}}">哈哈哈</view>//view组件会渲染出来 <view wx:if="{{false}}">哈哈哈</view> //view组件不会渲染出来 |
第二种变量控制：
定义一个变量为isShow,在js的页面的初始数据data里面变换true或false
.wxml
<view wx:if="{{isShow}}">哈哈哈</view> |
.js
data: { isShow:true, //当这个变量为true,渲染出来 //false,不会渲染出来 }， |
第三种切换控制：通过组件，切换是否显示内容
例如给button组件一个点击属性，在js里面通过setData改变isShow这个变量，isShow: !this.data.isShow，即对原来的值取反
.wxml
<button bindtap="handleSwitchShow">切换显示</button> <view wx:if="{{isShow}}">哈哈哈</view> |
.js
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) {
}, handleSwitchShow() { this.setData({ isShow: !this.data.isShow }) }, |
2.wx:else/wx:elif的使用
用于多个条件的判断，定义一个score变量，给它一个数值，data: {score:90 }
通过wx:elif/wx:else判断
.wxml
<view wx:if="{{score >=90}}">优秀</view> <view wx:elif="{{score >=80}}">良好</view> <view wx:elif="{{score >=60}}">及格</view> <view wx:else>不及格</view> |
.js
/** * 页面的初始数据 */ data: { score:90, }, |
3.wx:if与hidden区别
wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。
区别：
wx:if 是遇 true 显示，遇 false 不显示。它将一个组件隐藏时，该组件没有渲染，即不存在没有创建。用于显示和隐藏切换频率低时。
hidden 是遇 false 显示，遇 true 不显示。它将一个组件隐藏时，该组件依然存在，渲染但不显示，仅仅是通过css的display:none属性控制。用于显示和隐藏切换频率高时。
END
实习主编 | 王文星
责 编 | 来人间凑数
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
