刚刚开始接触小程序，发现是跟vue差不多的写法。但是又比vue少了很多功能，很不习惯
然后想做个显示隐藏的功能，找了网上大多数人都是：
建两个类：
vshow:{ display : block }
vhidden:{ display : none }
然后在wxml中是：
<view class="{{ showView ? vshow : vihdden }}"> 显示隐藏的元素、上面class中是三元表达式 </view>
<view bindtap="show">点击我切换效果</view>
js中：
data:{ showView:false //通过true 和 false 来切换类，达到显示隐藏的效果 }
show:function(){
this.setData({
showView:!this.data.showView
})
}
看了很多文章都是这样子做。当然还有别的更简单的做法。
使用 wx:if 跟 hidden
wx:if:
wxml:
<view wx:if="{{showView}}"> 显示隐藏的元素 </view> <view bindtap="show">点击我切换效果</view>
js中:
data:{ showView:false //通过true 和 false 来控制显示隐藏 } show:function(){ this.setData({ showView:!this.data.showView }) }
代码差不多。但是看起来就简洁了不少。
hidden:跟 wx:if 其实是差不多的。只是、hidden为true的时候进行隐藏。不然就是显示。所以改一下showView的初始值就可以了
区别：
wx:if : 隐藏的时候不渲染。显示的时候才会。不频繁切换用这个。
hidden:显示隐藏都会渲染。如果是切换频繁的话，用这个
ps:小程序单向流数据。点击之后发生的事件切换什么的都需要用setData({})来修改。不然不会产生效果
bindtap
请发表评论