微信小程序双向绑定
欢迎加入前端交流群交流知识获取视频资料:749539640
vue、angular的双向绑定如下示例:
- <div>
- <input type="text" [(ngModel)]="name">
- {{name}}
- </div>
你不需要多余的操作就可以实现这么简单的双向绑定,但是在小程序里就不是这么玩的了
- <view>
- <input bindinput="bindName" value='{{name}}'></input>
- {{name}}
- </view>
- bindName(e) {
- //方法一
- this.data.name = e.detail.value;
- this.setData({
- name: this.data.name
- })
- //方法二
- this.setData({
- name: e.detail.value
- })
- }
说一下方法一和方法二的区别:
方法一:第一步先赋值,值发生了变化,但是这个时候页面不会渲染为新数据,你需要调用setData才能刷新页面视图!
方法二:赋值并刷新视图
微信小程序双向绑定的更多相关文章
- 微信小程序のwxml绑定
一.微信小程序文件的构成 微信小程序包括js文件.json文件.wxml文件.wxss文件.wxs文件.js文件是展现界面的,注册这个程序的的页面,一般一个大写的Page({ })嵌入: json文件 ...
- 微信小程序——获取绑定事件元素的ID
小程序list数据带值跳转,一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识.如下图所示: 解析出来的结果如下图: 我们看到它在元素上绑定了一个checkSchoolL ...
- 微信小程序 事件绑定 bind和catch 区别
转自:https://blog.csdn.net/xiaoqiang_0719/article/details/79729592 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别 ...
- 微信小程序 bindcontroltap 绑定 没生效
微信 bindcontroltap 绑定 没生效 多次查看官方文档,代码没有问题, 解决: windows下 显示设置中 缩放必须是100%,
- 微信小程序事件绑定
一 通过实例来认识 (一) 给出代码 我们直接通过一个实例来引入我们想要讲解的内容: <input type="text" bindinput="handleInp ...
- 微信小程序 --- 事件绑定
事件类别: tap:点击事件: longtap:长按事件: touchstart:触摸开始: touchend:触摸结束: touchcansce:取消触摸: 事件绑定: bind绑定: catch绑 ...
- 微信小程序~事件绑定和冒泡
[1]事件绑定和冒泡 事件绑定的写法同组件的属性,以 key.value 的形式. key 以bind或catch开头,然后跟上事件的类型,如bindtap.catchtouchstart.自基础库版 ...
- 微信小程序开源项目库汇总
最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...
- 微信小程序开源项目库集合
UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...
随机推荐
- Node.js使用superagent模拟GET/POST请求样例
示例代码: var superagent = require('superagent'); superagent.get("http://localhost:8091/user/all?re ...
- Python3 Selenium自动化web测试 ==>FAQ:Unittest测试报告生成文件名加测试完成时间字符串
测试代码,虽然有点笨重,以后再修改: if __name__ == '__main__': report = os.path.join('D:/Python36/report/report.html' ...
- jQuery UI Widget(1.8.1)工作原理
/*! * jQuery UI Widget 1.8.1 * * Copyright (c) 2010 AUTHORS.txt (http://jqueryui.com/about) * Dual l ...
- Minimizing Difference 【思维】
题目链接: https://vjudge.net/contest/336389#problem/B 题目大意: 给出一个长度为n的数列以及操作次数k.k的范围为1e14.每次操作都可以选择给任意一个数 ...
- [LuoguP2164][SHOI2007]交通网络_拓扑排序_概率期望
交通网络 题目链接:https://www.luogu.org/problemnew/solution/P2164 数据范围:略. 题解: 直接算不好算,我们考虑建反图然后$Toposort$. 这样 ...
- tesseract 3.04在centos6上安装
tesseract是一个开源的OCR文字识别工具 查找相关文章:tesseract tesseract 4.0一直安装失败,后来参照网上的方法,成功安装3.04 1 2 3 4 5 6 7 8 9 ...
- go 二进制数据处理
以下是利用标准库binary来进行编解码 编码 ①使用bytes.Buffer来存储编码生成的串②使用binary.Write来编码存储在①的buf中 package main import ( &q ...
- 【AtCoder】AGC006
AGC006 A - Prefix and Suffix -- #include <bits/stdc++.h> #define fi first #define se second #d ...
- HTTPS 简单学习
1. HTTP缺点 使用明文通信,内容可能会被窃听: 通信加密:使用SSL和TLS: 内容加密: 不验证通信方的身份,因此可能会遭到伪装: SSL提供加密和证书: 无法证明报文的完整性,因此会遭到修改 ...
- C# DataTable映射成Entity
using System; using System.Collections.Generic; using System.ComponentModel.DataAnnotations.Schema; ...