微信小程序之数据操作

数据绑定

基本的数据绑定跟Vue一样。

.wxml代码

<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>姓名：{{array.name}}</view>
<view>年龄：{{array.age}}</view>

<view>姓名：{{arrays[0].name}}</view>
<view>年龄：{{arrays[0].age}}</view>
<view>姓名：{{arrays[1].name}}</view>
<view>年龄：{{arrays[1].age}}</view>

.js代码

Page({
  /**
   * 页面的初始数据
   */
  data: {
    name: "我是小明",
    age: 18,
    array: {
      name: '小明',
      age: 20
    },
    arrays: [{
        name: "小红",
        age: 13
      },
      {
        name: '小刚',
        age: 20
      },
      {
        name: '小王',
        age: 22
      }
    ]
  }
})

数据渲染

• 列表渲染

通过使用 wx:for=" " 来进行循环遍历，不要忘了加它 wx:key=" "，跟vue的v-for类似

<view wx:for="{{arrays}}" wx:key="">
  <view>姓名：{{item.name}}</view>
  <view>年龄：{{item.age}}</view>
</view>

• 条件渲染

通过使用 wx:if=" "

<view wx:if="{{true}}">显示</view>
<view wx:if="{{false}}">不显示</view>
<view wx:if="{{5>3}}">5>3</view>
<view wx:if="{{5<3}}">假的</view>
<view wx:if="{{5==3}}">5=3假的</view>
<view wx:if="{{5==5}}">5=5真的</view>

• block包装元素

<block>
  block不是组件,可以用来循环数据
</block>
<block wx:for="{{arrays}}" wx:key="">
  <view>姓名：{{item.name}}</view>
  <view>年龄：{{item.age}}</view>
</block>

自定义事件之传参

自定义事件中，通过使用 bindtap 来绑定事件，通过 data- 方式来进行传参

.wxml代码

<!-- 自定义事件 -->
<!-- data- 这是传参数 -->
<text bindtap='a' data-id="100" data-name='小明'>自定义事件</text>

<view bindtap='b' data-name="你点击的是小红">点击</view>

.js代码

Page({
  /**
   * 页面的初始数据
   */
  data: {

  },
  a: function(e) {
    console.log(e)
    console.log(e.target.dataset.name)
  },
  b:function(e){
    console.log(e)
  }
})

---

查看穿的参数：