小程序之双向绑定

作者: 前端来入坑 | 来源:发表于2018-09-22 16:47 被阅读1423次

    小程序没有像vue一样用v-model就可以实现input框的双向绑定数据,但小程序有自己的方法。

    • 不用点击按钮实现
    //wxml
    <input  placeholder="输入关键字" bindinput="bindKeyInput"></input>
    <text>{{ sugData }}</text>
    
    //js
    Page({
      data: {
        sugData:''
      },
      bindKeyInput: function(e){
        this.setData({
          sugData:e.detail.value;
        })
      },
    })
    
    • form表单中通过点击按钮实现数据绑定
    //wxml
    <view class='section'>
      <form bindsubmit='searchBox'>
          <input type='text'  name='keyword'></input>
          <button  form-type='submit'>提交</button>
      </form>
      <text>{{ sugData }}</text>
    </view>
    
    //js
    Page({
      data: {
        sugData:''
      },
    searchBox:function(e){
        this.setData({
          sugData:e.detail.value.keyword
        })
      }
    })
    

    相关文章

      网友评论

        本文标题:小程序之双向绑定

        本文链接:https://www.haomeiwen.com/subject/bedznftx.html