微信小程序双向绑定
欢迎加入前端交流群交流知识获取视频资料: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 ...
随机推荐
- java.lang.IllegalStateException: No primary or default constructor found for class java.time.LocalDate
转载自:https://blog.csdn.net/Coder_Arley/article/details/81910705 springboot中报错如下: springmvc也可以使用类似处理方法 ...
- 反向代理远端 单台tomcat 使用域名代理
.环境 nginx 10.1.1.161 公网:123.58.251.166 tomcat 10.1.1.103 .远端tomcat 配置 [root@host---- ~]# netstat -tn ...
- []how to use caffe model with TensorRT c++
//IHostMemory *gieModelStream {nullptr}; //const char* prototxt = "./googlenet/test_20181010.pr ...
- python 操作mysql数据库(mac)包括如何处理安装MySQL-python
一.数据库的安装,https://www.jianshu.com/p/fd3aae701db9 https://jingyan.baidu.com/article/fa4125ac0e3c2 ...
- poj3977(折半枚举+二分查找)
题目链接:https://vjudge.net/problem/POJ-3977 题意:给一个大小<=35的集合,找一个非空子集合,使得子集合元素和的绝对值最小,如果有多个这样的集合,找元素个数 ...
- Vue.directive()的用法和实例
官网实例: https://cn.vuejs.org/v2/api/#Vue-directive https://cn.vuejs.org/v2/guide/custom-directive.html ...
- jdk1.8 -- optional 的使用
一.optional的介绍 Optional 是个容器:它可以保存类型T的值,或者仅仅保存null.Optional提供很多有用的方法,这样我们就不用显式进行空值检测. Optional 类的引入很好 ...
- [转帖]四个修改Docker默认存储位置的方法
四个修改Docker默认存储位置的方法 https://blog.51cto.com/forangela/1949947 易改乾坤关注0人评论27435人阅读2017-07-22 09:18:48 ...
- Redis提供的持久化机制
Redis是一种面向“key-value”类型数据的分布式NoSQL数据库系统,具有高性能.持久存储.适应高并发应用场景等优势.它虽然起步较晚,但发展却十分迅速. 近日,Redis的作者在博客中写到, ...
- javaSE总结(一)-java数据类型和运算符
一.注释 (1)单行注释: // (2)多行注释:/* */ (3)文档注释:/** */ 二.标识符和关键字 (1)分隔符:分号; 花括号{} 方括号[] 圆括号() 空格 圆点(.) ...