小程序的“v-model“

2021-02-22更新
  小程序增加了一个简易双向绑定
用法

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

输入时,data中的value也会被相应的改变,
但是用于双向绑定的表达式有如下限制:

  1. 只能是一个单一字段的绑定,如
<input model:value="值为 {{value}}" />
<input model:value="{{ a + b }}" />

都是非法的;

  1. 目前,尚不能 data 路径,如
<input model:value="{{ a.b }}" />

这样的表达式目前暂不支持

不支持的只能是使用老方法了:
  在vue中,使用v-model可以实现input的双向绑定,但是在小程序中没有"v-model"这种直接的方法,可以用事件实现类似功能:

//wxml
<input  placeholder="输入关键字" bindinput="bindKeyInput"></input>
<text>{{ sugData }}</text>

//js
Page({
  data: {
    sugData:''
  },
  bindKeyInput: function(e){
    this.setData({
      sugData:e.detail.value;
    })
  },
})

  利用input的专属事件bindinput触发bindKeyInput事件,将e.detail.valuethis.setData({})给出去,这样就实现了类"v-model"操作

所写博客皆为自己的心得,如有错误欢迎指出,侵删,谢谢

  • 5
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苦夏木禾

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值