欢迎加入前端交流群交流知识获取视频资料: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. kubernetes之StatefulSet部署zk和kafka

    前提 至少需要三个node节点,否则修改亲和性配置 如果外部访问,需要自己暴露 需要有个storageClass,这样做的原因是避免手动创建pv了 部署zk和kafka 参考: https://www ...

  2. Vue学习笔记(二)

    1.引入组件需要注意的事项说明和步骤: 第一步,引入对应的组件: import Hello2 from './components/Hello2' 第二步: 需要注册该组件才可以使用 <scri ...

  3. rabbitmq-BasicReject

    拒收,是接收端在收到消息的时候响应给RabbitMQ服务的一种命令,告诉服务器不应该由我处理,或者拒绝处理,扔掉.接收端在发送reject命令的时候可以选择是否要重新放回queue中.如果没有其他接收 ...

  4. Ubuntu 14.04安装vim8

    本文介绍两种方法安装 VIM8.1 方法一:GitHub下载源码手动安装 1.查看系统是否有安装vim:如果有,先删除 dpkg -l | grep vim 2.从git上下载 git clone h ...

  5. Nginx负载均衡高可用---架构

    1. Nginx负载均衡高可用 首先介绍一下Keepalived,它是一个高性能的服务器高可用或热备解决方案,Keepalived主要来防止服务器单点故障的发生问题,可以通过其与Nginx的配合实现w ...

  6. 学习Yii(3)

    组件 Component的或其子类的实例.属性和事件 组件的属性.(名称大小写不敏感) 可读可写,就像对象的公共成员变量. 通过$component->属性名.获取属性值.$component- ...

  7. java 公共类

    package com.javaweb.mvc; import java.text.*; import java.util.Date; import java.util.Random; public ...

  8. idea把maven依赖树输出到控制台

    第一步 选中红色方框 第二步 点进去 输入命令:mvn dependency:tree 如果要输出到文件,找到pom文件的位置 进入命令行 输入: mvn dependency:tree >d: ...

  9. Reactor系列(十)collectMap集合

    #java#reactor#collect#hashMap# 转换成Map 视频讲解: https://www.bilibili.com/video/av80048104/ FluxMonoTestC ...

  10. luogu P1115 最大子段和 (dp)

    链接: https://www.luogu.org/problemnew/show/P1115 题面: 题目描述 给出一段序列,选出其中连续且非空的一段使得这段和最大. 输入输出格式 输入格式: 第一 ...