例如当条件为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 团队
微信号:算法与编程之美
本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请
点击举报。