微信小程序开发 条件渲染wxif,hidden;列表渲染wx:for

条件渲染:

在微信小程序中,条件渲染使用wxif,wxelif,wxelse来实现

在wxml中

<view wx:if="{
   
   {count ===1}}">view1</view>
<view wx:elif="{
   
   {count ===2}}">view2</view>
<view wx:else="{
   
   {count ===3}}">view3</view>

count对应.js中

 data: {
    count:1,
    logs: []
  },

另外,可以通过hidden来控制标签是否显示

<view hidden="{
   
   {falg}}">1</view>

如果flag为true,则view标签隐藏,否则显示。

列表渲染

使用wx:for根据数组循环渲染重复的组件结构

在wxml中

<view wx:for="{
   
   {arr1}}">
  数组索引:{
   
   {index}} 对应的item项是:{
   
   {item}}
</view>

arr1对应的.js文件:

arr1:['华为','苹果','小米','联想']

运行结果如下:

 可以使用wx:key来提高渲染效率(推荐使用)

在wxml中

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

arrlist对应的.js文件:

arrlist:[
      {
        id:1,name:'张三'
      },
      {
        id:2,name:'李四'
      },
      {
        id:3,name:'赵五'
      }

运行效果:

猜你喜欢

转载自blog.csdn.net/qq_35262929/article/details/127555963