小程序v-model
时间: 2023-10-09 09:07:16 浏览: 72
vue中的v-model原理,与组件自定义v-model详解
在小程序中,虽然没有直接的v-model方法,但可以通过使用事件实现类似的双向绑定功能。比如可以在wxml中使用bindinput事件来监听输入框的变化,并在js中使用setData方法更新数据。下面是一个示例代码:
```html
<input placeholder="输入关键字" bindinput="bindKeyInput"></input>
<text>{{ sugData }}</text>
```
```javascript
Page({
data: {
sugData: ''
},
bindKeyInput: function(e){
this.setData({
sugData: e.detail.value
})
}
})
```
此外,从2021-02-22开始,小程序也增加了一个简易的双向绑定方法,可以在输入框的属性中使用model:value来实现双向绑定,如下所示:
```html
<input model:value="{{value}}" />
```
这样就可以实现输入框的值与data中的value属性进行双向绑定。
总结来说,在小程序中可以通过事件和setData方法实现类似v-model的双向绑定功能,也可以使用model:value属性来简化双向绑定的写法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
阅读全文