微信小程序双向数据绑定
单向绑定语法
在微信小程序的规则中,
input
标签中的数据为单向绑定,无法像Vue框架中的v-model
直接进行input
的双向绑定。
例子:
<input value="{{value}}" />
解析:
如果使用
this.setData({ value: 'leaf' })
来更新value
,this.data.value
和输入框的中显示的值都会被更新为leaf
;但如果用户修改了输入框里的值,却不会改变this.data.value
。
双向绑定解决方案:
利用bindinput记录下input框中每次输入的值。
wxml代码:
<input type="text" value="{{searchCode}}" bindblur="getSearchValue"bindinput="getSearchInput">
</input>
js代码:
1 Page({2 data: {3 searchCode: null4 }, 5 getSearchInput(e) {6 this.searchCode = e.detail.value;7 },8 getSearchValue() {9 this.getSaveSearchValue('searchCode', this.searchCode)
10 },
11 // 存值入栈
12 getSaveSearchValue(name, value) {13 var data = {};
14 data[name] = value;
15 this.setData(data)
16 },
17 })
解决思路:利用小程序中的bindinput方法,记录每次输入的值,并将值暂时存入一个全局变量中。 再利用bindblur记录下Input框每次失去焦点时的最终值,并赋值给data中。
简单版:借助 input 组件的 bindinput 属性,每次输入值触发函数更新来完成
wxml:
<!-- 显示双向绑定的数据变动 -->
<text>数据:{{ message }}</text>
<!-- END --><!-- 用户输入框(实时改变数据) -->
<!-- 给input框绑定bindinput属性 -->
<!-- bindinput属性请查阅官方文档 -->
<input
style="border:2px solid red"
type="text"
bindinput="messageChang">
</input>
<!-- END -->
js:
Page({/** 事件处理*/data: {message: ''//用户输入框数据},/** 事件处理*//** 【当用户输入数据时(每当)就会触发函数】* 设置了bindinput属性后会返回对象(e)* 你也可以先console一下e对象看看是什么* 然后通过e对象获取输入框value值* 最后setDate实时更新到message上*/messageChang: function(e) {// 获取输入框当前value值let value = e.detail.value// 及时更新数据this.setData({message: value})}})
极简版(有局限性慎用,后面会提到
)
对应属性前加入model:前缀:
<input model:value="{{value}}" />
用户输入的同时改变 this.data.value
局限性:
与vue相比,暂不支持表达式形式,如下
<input model:value="{{ a.b }}" />
data: {a:{b:'hello'}}
微信小程序双向数据绑定相关推荐
- right 微信小程序_微信小程序双向slider
图片来源:视觉中国 产品需要一个双向可以调节的slider用来做微信小程序价格范围筛选,官方slider是单向的,这和iOS和安卓都是一样的,所以自定义了一个组件微信小程序双向slider. 双向sl ...
- 微信小程序通过数据绑定获取用户名和头像
微信小程序通过数据绑定获取用户名和密码 1.获取用户名和头像 <view>数据绑定</view> <view>数据:{{message}}</view> ...
- 微信小程序的数据绑定
微信小程序的页面分别由四个文件组成: 1..js(逻辑处理文件):负责页面逻辑内容的处理,遵循js语言框架. 2..json(配置文件):用来设置页面的窗口内容,遵循JSON语法规范. 3..wxml ...
- 关于微信小程序双向绑定
关于微信小程序 数据双向绑定便捷方式 双向绑定 变量更新刷新页面 页面输入刷新变量 wxml写法 双向绑定 意思就是一个变量发生更改,界面随之更新 vue的双向绑定就做的非常舒服 微信的双向绑定 准确 ...
- 微信小程序双向绑定,4面阿里拿到P7Offer,面试真题解析
正文 从我个人的角度写写30多岁码工的感受:的确是受年龄压力开始增大了.比如二十多岁的小年轻,可能什么都懂,对组里的东西很熟悉.有时候我也怀疑自己是不是智商不够,是不是自学能力太差,是不是基础不行,别 ...
- 微信小程序开发--数据绑定
一.单项数据绑定 <!-- index.wxml --> <view class="container"><form><input val ...
- 微信小程序数据数据绑定显示NaN
问题现象: 后端传到前端的数据显示到页面上为NaN 问题分析: NaN的意思是非数字,由此可知解析的时候将非数字解析成了数字 对数据及代码进行检查,后台返回的数据并不需要计算,而是直接绑定到页面上即可 ...
- 微信小程序---双向绑定传参
1.双向绑定 1.1html <view class="text"><textarea placeholder=" 来呀,写下你的心情" va ...
- wxml 判断 小程序_微信小程序wxml数据绑定总结
今天系统的记录一下wxml的数据绑定功能.吐舌头 首先给出要用到的wxss样式文件 /* pages/wxml/wxml.wxss */ .wxml-container{ padding: 0 20r ...
最新文章
- 算法:模式匹配之KMP算法
- 哈佛大学推荐的20个快乐习惯
- mysql left join join right
- 年薪60w财务总监的加薪秘诀:从不用Excel做报表
- C++ Primer 第五版 第6章 6.2——函数参数传递习题答案
- 将Java项目从maven迁移到gradle
- 炼丹手册——数据增广
- 视觉感知「挑战」天花板,多摄像头环绕方案同比增长近100%
- python读取udp数据包内容_python – 解析UDP数据包
- 直播系统源码开发经验分享
- 【python】Anaconda3环境安装
- java输入数字金额输出汉字大写,java实现数字金额转换成汉字大写金额
- 2020年全国大学生数学建模竞赛辽宁赛区获奖名单(本科组)
- C语言基础(初识C语言)
- 内核函数-assembler.h分析
- Linux中MISC驱动简介及其简单使用
- USB 虚拟串口简介
- JS之向上取整、向下取整、四舍五入等
- 简单粗暴通俗易懂的理解贝塞尔曲线
- XCon 2022 | 赛宁主动防御体系惊喜登场