微信小程序数据渲染

微信小程序数据渲染，把JavaScript中的数据直接在HTML中显示，这样就可以动态地设置、修改HTML中DOM的元素值，方便把逻辑代码与界面分开，达到解耦的效果。

数据绑定

在DOM元素中，将.js文件中data里面的key存放在两个大括号“{{ }}”中（“{{key}}”），在页面渲染的时候，会自动把.js中data里面的key对应的值渲染到页面中。

.wxml文件的代码如下：

<view> {{ key }} </view>  <!-- 显示效果为hello world -->

.js文件的代码如下：

Page({
  data:{
    key: "hello world"
  }
})

组件属性引用也要写在两个大括号中。

.wxml文件的代码如下：

<view id="item-{{id}}">    </view>
Page({
  data:{
    id: number,
  }
})

在两个大括号中也可以是一些简单的算术运算符、三目运算符、比较运算符等，代码如下：

<!-- 三目运算符 -->
<view hidden="{{ flag ? true : false }}"> </view>
<!-- 算术运算 -->
<view> {{ num1 + num2}} </view>    <!-- 显示内容为3 -->
Page({
  data:{
    num1:1,
    num2:2,
  }
})
<!-- 字符串运算 -->
<view> {{"hello" + key}} </view>        <!-- 显示效果为hello world -->

条件渲染

可以使用wx:if=" {{ key }}"来控制整体组件的显示和隐藏效果。key值会自动转为boolean类型，当为true时则组件显示，当为false时则组件隐藏。也可以使用<block wx:if="{{ key }}"> </block>来控制整个block标签内部的显示和隐藏。block并不是一个组件，而是一个包装元素、组件的标签。

使用hidden样式隐藏的话，组件始终会被创建渲染，而使用wx:if则不会，所以在高频率的切换中，最好使用hidden来处理。

列表渲染

循环渲染可以传递一个数组，一次渲染出多个同类型的组件。默认数组当前项的下标变量名为index，数组当前每一项的变量名默认为item，可以通过item获取当前项的内容，代码如下：

<view wx:for="{{array}}" wx:for-index="ind" wx:for-item="itemName">
  {{ind}}: {{itemName.message}}
</view>
Page({
  data:{
    array:[
          {message:'qi'},       // 一个item
        {message:'chao'},,     // 一个item
        {message:'fan'},,       // 一个item
          ]
      }
    })
    <!--显示效果 -->
1:qi
2:chao
3:fan

使用wx:for时列表的位置会动态改变，所以为了保存组件的特征和状态，需要使用wx:key来指定列表中项目的唯一标识符，如果不提供wx:key会提出一个警告。也可以使用<block wx:for="{{array}}"> </block>来循环创建整个block内部的内容。

酷客网相关文章：

• 微信小程序生命周期函数
• 微信小程序配置
• 微信小程序项目文件介绍
• 第一个微信小程序