wx:if 和hidden.png
参考文档
1.微信小程序--hidden不生效原因及解决方案
2.微信小程序18，建议不要使用组件的hidden属性
3.条件渲染
前提
一般来说，我隐藏view都是使用display：none的，但是最近，在form组件中，使用了hidden，用hidden隐藏组件，和form中的picker绑定name值。但是奇怪的是，我无论把hidden的值设置成false还是true，感觉变化都不大。并不知道这个hidden的正确用法在哪里？
wxml
<form bindsubmit="formSubmit">
<view>
<input name="name" value="" placeholder='姓名'></input>
</view>
<view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
当前选择：{{array[index]}}
</view>
</picker>
</view>
<view>
<button size="mini" type="warn" formType="submit">Submit</button>
</view>
<view hidden='false'>
<input name="city" value="{{array[index]}}"></input>
</view>
</form>
js
Page({
data: {
array: ['美国', '中国', '巴西', '日本'],
objectArray: [
{
id: 0,
name: '美国'
},
{
id: 1,
name: '中国'
},
{
id: 2,
name: '巴西'
},
{
id: 3,
name: '日本'
}
],
index: 0,
formtext:''
},
bindPickerChange: function (e) {
// console.log('picker发送选择改变，携带值为', e.detail.value)
this.setData({
index: e.detail.value
})
},
formSubmit: function (e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
this.setData({
formtext: e.detail.value.name + e.detail.value.city
})
}
})
style
hidden.png
无论你hidden等于true还是false，结果都是display：none。所以，一般这个基本不要设置true or false，直接<view hidden></view> 就好，相对的，由于这个因素，也不能数据绑定了。
最后（两者主要用于显示隐藏）
1.按照我的理解：display：none 和 hidden 的作用一样，显示出来的结果是一致的，都是隐藏。
display:none ： 隐藏，不占空间
hidden : 隐藏，占用空间
2.hidden不能进行动态绑定，可以使用wx：if
因为wx:if之中也可能包含数据绑定，所以当wx:if的条件值切换时，框架有一个局部渲染的过程，他会确保条件在切换是销毁或者重新渲染。同时wx:if也是有惰性的，如果初始渲染条件为false,框架什么也不会做，只有在条件第一次变为真的时候才会开始渲染。相比之下hidden就简单的多，组件始终都会被渲染，只是简单的控制显示和隐藏，一般来说，wx：if 有更高的切换消耗，而hidden有更高的初始渲染消耗，你可以根据自己的需求来调用。
wx:if 与 hidden 都可以控制微信小程序中元素的显示与否。
wx:if 是遇 true 显示，hidden 是遇 false 显示。
wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。
所以如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。
如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。
频繁切换：用 hidden。
偶尔切换：用 wx:if。
