原生小程序的单向双向绑定--简易双向绑定

1、在wxml中,普通属性的数据绑定是单向的

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

上面这串代码,可以通过this.setData({value:xxx})去更新值和输入框中显示的值也会更新为xxx,但是如果不使用this.setData(),则无法同时改变this.data.value的值。

因此可以借助简易双向绑定机制,在对应属性前面加上model:前缀,如:

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

这样就可以实现简单的双向绑定,不过简易的双向绑定是有条件限制的。

2、简易双向绑定

(1)只能是单个字段的属性绑定:

<input model:value="{{value1}}" />value1:{{value1}}
<input model:value="值2:{{value2}}" />value2:{{value2}}
<input model:value="{{value3+value4}}" />value3:{{value3}} + {{value4}}

输出的结果如下:

(2)暂不支持data路径的属性,即对象.属性名,如:

 <input type="text" value="{{addForm.name}}" />

这样的写法,无法双向绑定的。

posted @ 2022-08-24 10:17  小啊柒  阅读(586)  评论(0)    收藏  举报