微信小程序> 小程序视图层数据渲染

小程序视图层数据渲染

浏览量:2862 时间: 来源:浪子四方

简单渲染

 

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

<view>{{ name}}</view>
Page({  data: {    name: 'Trevor'  }})

 

列表渲染

wx:for

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

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

 

<view wx:for="{{user}}">  {{index}}: {{item}}</view>
Page({  /**   * 页面的初始数据   */  data: {    user: ['Trevor','brell', 'jaky', 'lily']  }})

 

条件渲染

wx:if

在组件中使用 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'  }})

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎