微信小程序if for

 1.控制代码的显示隐藏

1.wx:if="{{}}"判断是否需要渲染代码

<view wx:if="{{tiaojian===1}}">显示1</view>
<view wx:elif="{{tiaojian===2}}">显示2</view>
<view wx:else>显示3</view>

  data: {

    tiaojian:1

  },

block  一次性控制多个组件的显示与隐藏   在页面上不会显示任何包裹的标签

 

 2.hiddren=“{{}}”控制显示隐藏

<view hidden="{{tiaojian}}">true时候隐藏  false显示</view>

  
data: {
    tiaojian:true
  },

 

区别：

wx:if   动态创建移出元素，控制元素的展示与隐藏

hiddren：切换样式的方式让元素display:block/display:none    控制元素的展示与隐藏

 

 

 

 

 

 

 

2.wx:for

<view wx:for="{{arr1}}">
索引是：{{index}}
当前项是：{{item}}
</view>

  data: {

   arr1:["小王","小端","小慧"]

  },

 

 

 

wx:for-index可以指定索引的变量名

wx:for-item可以指定当前项的变量名

<view wx:for="{{arr1}}" wx:for-index="suoyin" wx:for-item="nr">
索引是：{{suoyin}}
当前项是：{{nr}}
</view>

3.wx：key(提高渲染效率)

<view wx:for="{{Arrlist}}" wx:key="id">
{{item.name}}
</view>

  data: {

  Arrlist:[

    {id:1,name:'小杨'},

    {id:2,name:'小王'},

    {id:3,name:'小姚'}

  ]

  },