## wx:if ``` //index.wxml <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) } }) ``` ## demo ### 1.使用点击事件,实现图片切换 ``` //index.wxml <image bindtap = "click" wx:if="{{show}}" src="/images/tab/ciwei.png"/> <image bindtap = "click" wx:else src="/images/tab/ciwei_hl.png"/> ``` ``` //index.js Page({ data: { show:false }, click(){ if(this.data.show){ this.setData({ show:false }) }else{ this.setData({ show:true }) } } }) ``` ### 2.使用三元表达式 ``` <image bindtap = "click" src="{{show?'/images/tab/ciwei.png':'/images/tab/ciwei_hl.png'}}"/> ``` ## tips >用户操作或者数据更新引起数据变化，视图需要同步更新。 > 所以视图上的数据都必须用过事件传递给对象，只有用户操作视图，才能获取到数据，并更新对象状态。调用this.setData（）方法实现视图的部分渲染。 >  * 视图A由于用户操作，触发事件A 。 * 事件A处理函数中，更新对象A和对象B的状态。 * 由于对象A和B状态变化，通知视图A和B更新。 ``` //index.wxml: <view bindtap="changeText"> {{ message }} </view> ``` ``` //index.js Page({ data: { message: 'Hello MINA!' }, changeText: function(){ this.setData({ message:'changed data' }) } }) ```