数据渲染

1.数据渲染

index.js：在js文件中定义数据，通过 {{}} 来进行数据的渲染

Page({
  /**
   * 页面的初始数据
   */
  data: {
    msg: "xxxx info",
    a: 1,
    b: 2,
    flag: true,
    list: [1, 2, 3],
    obj: {
      name: "xx"
    }
  },
})

<view>{{msg}}</view>
<view>{{a+b}}</view>
<view>{{flag?"Y":"N"}}</view>
<view>{{list[0]}}</view>
<view>{{obj.name}}</view>

<!--标准属性的绑定-->
<view class="{{obj.name==true?'ac':''}}"></view>

<!-- 自定义属性的绑定：自定义属性前缀必须加上data- -->
<view data-key="{{key==true?'xx':'bb'}}"></view>

2.wx:for

介绍： 属性将当前组件按着数组的长度动态创建，并且通过 index 变量可以访问到数组的索引值，通过item变量可以访问到单元值。

替换：如果要替换默认的item和index变量

3.wx:key

介绍：来指定列表中项目的唯一的标识符

保留关键字 `*this：代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如下图

4.wx:if

介绍：用来进行判断

注意：如果是同一个判断条件，输出多个标签：使用block标签

<view class="item" wx:key="*this" wx:for="{{users}}" wx:for-item="user">
  <text>{{index+1}}</text>
  <text>{{user.name}}</text>
  <text>{{user.age}}</text>
  <text>{{user.gender}}</text>

  <!-- block：就是配合 if 输出多个不同标签 -->
  <block wx:if="{{user.age >= 18}}">
    <text>是</text>
    <text>是</text>
  </block>

  <block wx:else>
    <text>否</text>
    <text>否</text>
  </block>
</view>

5.hidden

介绍：控制元素节点是否显示在视图中

<view hidden>asdsa</view>

<view hidden="{{false}}">asdsa</view>

6.事件

格式：bind:事件类型=”事件执行函数“

事件类型：

1,tap：手指点击屏幕

2,focus：获取焦点

3,blur：失去焦点

7.事件对象及自定义属性

介绍：微信原生函数不支持传递参数，只能通过事件对象获取元素上自定义的属性来判断点击的是哪个元素，或者完成某种判断业务

8.this的数据更新

介绍：实现数据与视图的同步更新，setData()，会自动新传入的对象内，修改变化的属性值进行同步