欢迎加入前端交流群交流知识获取视频资料: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才能刷新页面视图!

方法二:赋值并刷新视图

微信小程序双向绑定的更多相关文章

  1. 微信小程序のwxml绑定

    一.微信小程序文件的构成 微信小程序包括js文件.json文件.wxml文件.wxss文件.wxs文件.js文件是展现界面的,注册这个程序的的页面,一般一个大写的Page({ })嵌入: json文件 ...

  2. 微信小程序——获取绑定事件元素的ID

    小程序list数据带值跳转,一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识.如下图所示: 解析出来的结果如下图: 我们看到它在元素上绑定了一个checkSchoolL ...

  3. 微信小程序 事件绑定 bind和catch 区别

    转自:https://blog.csdn.net/xiaoqiang_0719/article/details/79729592 本文以冒泡事件tap(手指触摸后马上离开,也就是点击事件)为例子来区别 ...

  4. 微信小程序 bindcontroltap 绑定 没生效

    微信 bindcontroltap 绑定 没生效 多次查看官方文档,代码没有问题, 解决: windows下  显示设置中 缩放必须是100%,

  5. 微信小程序事件绑定

    一 通过实例来认识 (一) 给出代码 我们直接通过一个实例来引入我们想要讲解的内容: <input type="text" bindinput="handleInp ...

  6. 微信小程序 --- 事件绑定

    事件类别: tap:点击事件: longtap:长按事件: touchstart:触摸开始: touchend:触摸结束: touchcansce:取消触摸: 事件绑定: bind绑定: catch绑 ...

  7. 微信小程序~事件绑定和冒泡

    [1]事件绑定和冒泡 事件绑定的写法同组件的属性,以 key.value 的形式. key 以bind或catch开头,然后跟上事件的类型,如bindtap.catchtouchstart.自基础库版 ...

  8. 微信小程序开源项目库汇总

    最近做了一个微信小程序开源项目库汇总,里面集合了OpenDigg 上的优质的微信小程序开源项目库,方便移动开发人员便捷的找到自己需要的项目工具等,感兴趣的可以到GitHub上给个star. UI组件 ...

  9. 微信小程序开源项目库集合

    UI组件 weui-wxss ★852 - 同微信原生视觉体验一致的基础样式库 Wa-UI ★122 - 针对微信小程序整合的一套UI库 wx-charts ★105 - 微信小程序图表工具 wema ...

随机推荐

  1. 深度学习中的Attention机制

    1.深度学习的seq2seq模型 从rnn结构说起 根据输出和输入序列不同数量rnn可以有多种不同的结构,不同结构自然就有不同的引用场合.如下图, one to one 结构,仅仅只是简单的给一个输入 ...

  2. idea调试jdk1.8源码(最新)

    我们发现如果,直接用idea点项目jdk源码进去后发现自己不能注释说明,非常麻烦,不便阅读记录 于是: 1.在安装的jdk1.8路径下,找到src.zip和javafx-src.zip压缩文件 ,解压 ...

  3. .Netcore 2.0 Ocelot Api网关教程(9)- QoS

    本文介绍Ocelot中的QoS(Quality of Service),其使用了Polly对超时等请求下游失败等情况进行熔断. 1.添加Nuget包 添加 Ocelot.Provider.Polly  ...

  4. ansible实践

    ansible常用module ansible-doc -l List available modules -s Show playbook snippet for specified module( ...

  5. CMake版本升级

    CMake 是一个可扩展的开源系统,以独立于编译器的方式在操作系统中管理生成过程.与许多跨平台系统不同,CMake 旨在与本机生成环境结合使用.放置在每个源目录中的简单配置文件(称为 CMakeLis ...

  6. 【Qt开发】关于QWSServer

    QWS Server QT Embeded应用没有来严格的区分server和client进程,如果一个QT进程的启动参数中有-qws,那么这个进程就具有server管理功能,被称为QWS server ...

  7. 35.百度云语音识别接口使用及PyAudio语音识别模块安装

    百度云语音识别接口使用: 百度云语音识别接口文档:https://cloud.baidu.com/doc/SPEECH/ASR-API.html#JSON.E6.96.B9.E5.BC.8F.E4.B ...

  8. [学习笔记] Hibernate 4.3.5 下载与安装

    下载 http://hibernate.org/orm/releases/4.3/ https://sourceforge.net/projects/hibernate/files/hibernate ...

  9. solr的使用

    一,下载,安装 https://lucene.apache.org/solr/ 二, mac下使用 下载二进制包后,解压 step 1 进入solr目录: cd solr-8.2.0 step 2 进 ...

  10. Linux下安装jdk中遇到的坑

    比如:我以jdk-8u211-linux-i586.tar.gz为例进行. 下载完成后解压到指定文件下先创建java文件目录,如果已存在就不用创建[root@lyh:] # mkdir -p /usr ...