欢迎加入前端交流群交流知识获取视频资料: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. windows 下OPENSSL 生成秘钥和公钥的方法

    1. 生成原始 RSA私钥文件 private_key.pem openssl genrsa -out private_key.pem 1024 2. 将原始 RSA私钥转换为 pkcs8格式 ope ...

  2. [!] The version of CocoaPods used to generate the lockfile (1.4.0.beta.1) is higher than the version of the current executable (1.3.0.beta.1). Incompatibility issues may arise.

    今天在看一个开源Demo代码的时候,需要执行pod install命令,直接报错如下: 解决方法: 执行:pod update 命令更新资源库即可.

  3. save()和savaorupdate的区别

    hibernate的保存 hibernate对于对象的保存提供了太多的方法,他们之间有很多不同,在这里细说一下,以便区别: 一.预备知识:     在所有之前,说明一下,对于hibernate,它的对 ...

  4. .Netcore 2.0 Ocelot Api网关教程(7)- 限流

    本文介绍Ocelot中的限流,限流允许Api网关控制一段时间内特定api的总访问次数.限流的使用非常简单,只需要添加配置即可. 1.添加限流 修改 configuration.json 配置文件,对  ...

  5. 在 Laravel 中使用 MongoDB

     可参考:https://blog.csdn.net/weixin_38682852/article/details/80840678 环境准备 安装 MongoDB 安装 PHP-MongoDB 扩 ...

  6. 第3课.进化后的const

    1.c语言中 const修饰的变量是只读的,本质上还是变量 const修饰的局部变量在栈上分配空间(因为在栈上分配空间,所以我们可以通过改变这个空间的值.间接去改变这个变量.) const修饰的全局变 ...

  7. 使用nginx构建限频、限速、限并发的应用保护层

    使用nginx构建限频.限速.限并发的应用保护层 nginx本身提供了基础的限频.限速.限并发连接等能力. 限频 基于uri等限制某一个客户端,某类客户端持续时间段内建立连接的次数. 限速 限制客户端 ...

  8. [转帖]三款Nehalem至强5500塔式服务器横评对决(4)

    三款Nehalem至强5500塔式服务器横评对决(4) http://tech.sina.com.cn/b/2009-12-14/05051172233_4.shtml 可以看到两路服务器的设置 基本 ...

  9. 将一个整数数组先按照因子数量排序,再按照数字大小排序,输出第k个数

    同小米OJ比赛题:现在有 n 个数,需要用因子个数的多少进行排序,因子个数多的排在后面,因子个数少的排在前面,如果因子个数相同那么就比较这个数的大小,数大的放在后面,数小的放在前面.现在让你说出排序之 ...

  10. day04_XPATH提取数据

    1.XML简介 1.1.定义 ​ 可扩展标记语言(EXtensible Markup Language) 1.2.特点 一种标记语言,很类似 HTML XML 的标签需要我们自行定义 被设计为具有自我 ...