setData修改数据

微信小程序提供 setData 方法用于修改 data里的数据

• 示例1: 点击按钮,修改data里的show值用来控制元素的显示和隐藏

<view class="container">
    <view class="box" wx:if="{{show}}">
      要显示和隐藏的内容
      {{message}}
    </view>

    <button type="primary" bindtap="changeShow">
    {{show?'隐藏':'显示'}}
    </button>
</view>

Page({
    data: {
        message: "hello 小程序",
        show: true
    },
    changeShow(){
        let show = this.data.show
        console.log(show)
        this.setData({
            show: !show
        })
    },
})

• 示例2: 在输入框中输入内容,改变data里的message属性

  <input class="weui-input" 
  auto-focus 
  bindchange="changeValue"
  placeholder="将会获取焦点"/>
  <text>{{message}}</text>

Page({
    data: {
        message: "hello 小程序",
    },
    changeValue(ev){
        this.setData({
            message: ev.detail.value
        })
    },
})

• 示例3:边输入内容边改变message的值

    <view class="container">
    <input class="weui-input" 
    auto-focus 
    bindinput="changeValue"
    placeholder="将会获取焦点"/>
    <text></text>
  
    <button bindtap="tapChange">按钮</button>
    </view>
  

    Page({
        data: {
            message: "hello"
        },
        changeValue(ev){
            this.setData({
            message: ev.detail.value
            })
        },
        tapChange(){
            this.setData({
            message: '我是button改过来的'
            })
        },
    })
  

思考: 当我点击按钮的时候,它改变了message的值,但是input里的值是否有改变,没有改变的原因是什么?

简易双向绑定

基础库 2.9.3 开始支持，低版本需做兼容处理。

双向绑定语法

在 WXML 中，普通的属性的绑定是单向的。例如：

<input value="{{value}}" />

如果使用 this.setData({ value: 'leaf' }) 来更新 value ，this.data.value 和输入框的中显示的值都会被更新为 leaf ；但如果用户修改了输入框里的值，却不会同时改变 this.data.value 。

如果需要在用户输入的同时改变 this.data.value ，需要借助简易双向绑定机制。此时，可以在对应项目之前加入 model: 前缀：

<input model:value="{{value}}" />