微信小程序数据渲染

微信小程序数据渲染,把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内部的内容。

酷客网相关文章:

赞(0)

评论 抢沙发

评论前必须登录!