欢迎加入前端交流群交流知识获取视频资料: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. 上证50ETF申赎清单

    [ETF50] Fundid1=510051 CreationRedemptionUnit=900000 MaxCashRatio=0.50000 Publish=1 CreationRedempti ...

  2. 集群架构03·MySQL初识,mysql8.0环境安装,mysql多实例

    官方网址 https://dev.mysql.com/downloads/mysql/社区版本分析 MySQL5.5:默认存储引擎改为InnoDB,提高性能和可扩展性,增加半同步复制 MySQL5.6 ...

  3. GRU网络

    1.GRU(Gated Recurrent Unit) 为了克服RNN无法远距离依赖而提出了LSTM,而GRU是LSTM的一个变体,GRU保持LSTM效果的同时,又使结构变得简单. 2.GRU结构 G ...

  4. edusoho 查找网址对应的控制器和模板页面

    刚接触这套系统的新手都在纠结模板在哪个文件里,有时候就算告诉他,遇到其他同样的模板照样还问,授人以鱼不如授人以渔!这个文章记录下我自己的看法,大爪子忽喷! 刚看到群里有人问 xxx.com/admin ...

  5. 学习笔记:CentOS7学习之二十二: 结构化命令case和for、while循环

    目录 学习笔记:CentOS7学习之二十二: 结构化命令case和for.while循环 22.1 流程控制语句:case 22.2 循环语句 22.1.2 for-do-done 22.3 whil ...

  6. 使用Dreamweaver制作简单网站

    上课过程中有的同学反应没有听懂,特写此博客,将dreamweaver使用过程,细化到每一步,跟着做就行. 一.安装dreamweaver. 1.dreamweaver免安装版下载地址 链接:https ...

  7. python xlrd模块

    一.什么是xlrd模块? Python操作excel主要用到xlrd和xlwt这两个库,即xlrd是读excel,xlwt是写excel的库. 二.使用介绍 1.常用单元格中的数据类型 类型 含义 e ...

  8. 《你必须知道的495个C语言问题》读书笔记之第11-14章:ANSI C标准、库函数、浮点数

    一.ANSI C标准 1. ANSI向C语言预处理器引入了几项新的功能,包括“字符串化”操作符(#).“符号粘贴”操作符(##).#pragma指令. 2. Q:char a[3] = "a ...

  9. axios 使用post方式传递参数,后端接收不到

    最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414 ...

  10. bootstrap-table删除指定行注意事项

    方法有两种: 1.使用官方文档的数据(反正我试了2个小时都不行,如有大神请指导下):使用events和operate相结合的方式 2.不使用events,在formatter里面定义事件的实现. 上面 ...