小程序 显示隐藏

刚刚开始接触小程序，发现是跟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