小程序视图层数据渲染

Trevor Lan

于 2019-04-11 15:13:36 发布

阅读量936

点赞数

CC 4.0 BY-SA版权

分类专栏：小程序

19 篇文章

订阅专栏

本文详细介绍小程序中数据绑定的Mustache语法应用，包括简单渲染、列表渲染及条件渲染的具体实现方式，帮助开发者掌握高效的数据展示技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简单渲染

数据绑定使用 Mustache 语法（双大括号）将变量包起来

<view>{{ name}}</view>

Page({
  data: {
    name: 'Trevor'
  }
})

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<view wx:for="{{user}}">
  {{index}}: {{item}}
</view>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    user: ['Trevor','brell', 'jaky', 'lily']
  }
})

在组件中使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块

<block wx:if="{{admin}}">
  <view>{{name}}</view>
  <view>{{age}}</view>
  <view>{{sex}}</view>
</block>

Page({
  /**
   * 页面的初始数据
   */
  data: {
    admin:true,
    name:'Trevor',
    age:23,
    sex:'boy'
  }
})