小程序input实现数据双向绑定

小程序input实现数据双向绑定

  • 最终效果
  • index.wxml
  • index.js

最终效果

在这里插入图片描述

index.wxml

<view class="uploader"><input type="number" style="border: 2rpx solid #666;" bindinput='inputChange' data-name='peopleNumber' placeholder="输入人数" /><input value="{{peopleNumber}}" style="border: 2rpx solid #666;" />
</view>

index.js

Page({data: {},// input框中输入的值,立即保存到worker变量中  视图=>data的更新// 变量worker变更,input框中的数据也就会立即变量   data=>视图 (小程序原本就存在的功能,这一部分不需要刻意实现)inputChange(event) {let _this = thislet dataset = event.currentTarget.dataset;let value = event.detail.valuelet name = dataset.name;console.log(name)_this.data[name] = value;_this.setData({[name]: _this.data[name]})console.log(_this.data[name])}
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407489.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JS之字符串分割方法split

作用&#xff1a;JavaScript split() 方法用于把一个字符串分割成字符串数组 语法&#xff1a;stringObject.split(separator,howmany) 参数1&#xff1a;separator必选&#xff0c;字符串或正则表达式&#xff0c;从该参数指定的地方分割 stringObject 参数2&#xff1a;ho…

在 Laravel 中,清空缓存大全

在 Laravel 中&#xff0c;清空缓存通常涉及到清除应用程序中的缓存文件和数据库查询缓存。以下是一些常用的清空缓存方法&#xff1a; 1. 清除路由缓存&#xff1a; Laravel 的路由缓存可以提高应用程序的性能&#xff0c;但在开发过程中&#xff0c;你可能需要频繁地更改路…

[Windowns C]递归遍历指定目录下的子目录和文件

/*功能&#xff1a;演示了利用C语言递归遍历指定目录下的子目录和文件!说明&#xff1a;经修改也可以搜索文件名符合特定格式的文件&#xff0c;如修改“\\*.*”为“\\*.log”*/#include <iostream> #include <string> #include <io.h>using namespace std;v…

资深工程师为何否定这种单例模式

本人在 横刀天笑 的一篇谈论单例模式的文章http://www.cnblogs.com/yuyijq/archive/2007/10/07/915941.html里面有两种写单例的例子.有一种方法得到资深工程师的否定.事实证明他的想法是错误的。 第一种:publicclassSingleton2{ 3 private static Singleton _instance null…

汇编Ring 3下实现 HOOK API

【文章标题】汇编ring3下实现HOOK API 【文章作者】nohacks(非安全,hacker0058) 【作者主页】hacker0058.ys168.com 【文章出处】看雪论坛(bbs.pediy.com) [ 汇编ring3下实现HOOK API ] Author: nohacks …

CSS之window的视图属性

1. innerWidth 属性和innerHeight 属性 innerWidth获取浏览器窗口宽度&#xff0c;注意不带浏览器的边框宽度&#xff0c;但是包括下拉按钮的宽度 innerHeight获取浏览器窗口高度&#xff0c;从浏览器底部到工具栏的距离&#xff0c;注意不包括工具栏的高度 innerWidth和inner…

[Linux C]递归遍历指定目录,以目录树形式展示

/*功能&#xff1a;演示了利用C语言递归遍历指定目录下的子目录(不含隐藏目录)和文件&#xff0c;并以目录树形式展示!其中编译命令为&#xff1a;gcc -o travel travel.c -stdc99*/#include <stdio.h>#include <dirent.h>#include <stdlib.h>#include <s…

在SQL Server2005中进行错误捕捉

任何程序都可能出现错误&#xff0c;在SQL Server中执行Transact-SQL也不例外。如果在Transact-SQL中发生了错误&#xff0c;一般有两种捕捉错误的方法&#xff0c;一种是在客户端代码&#xff08;如 c#、delphi等)中使用类似try...catch的语句进行捕捉&#xff1b;另外一种就是…

ListT用法

List<T>和List的用法是一模一样的,不同的是,List支持任何类型而List<T>只支持T类型,T是在定义时指定的类型. 如: List<string> listnew List<string>; 这样的话,每个list里的元素都是字符串. 同理, List<int> listnew List<int>; 这样的话…

reduce

reduce reduce(callback,initiaValue)会传入两个变量&#xff0c;回调函数(callback)和初始值(initiaValue)。1.只传回调函数 prev只取数组的第一个元素 next从数组的第二个元素开始一直往下取var arr ["a", "b", "c", "d", "e&…

CSS之Screen视图属性

1.availWidth和availHeight availWidth和availHeight返回的是显示器可用宽高&#xff0c;注意不包括开始菜单栏这种东东的高度和宽度 2.colorDepth 表示显示器的颜色深度 3.width和height 表示显示器屏幕的宽高&#xff0c;和availWidth和availHeight的区别是返回的宽高包含…

[Linux C]递归遍历指定目录下的子目录和文件

/*功能&#xff1a;演示了在Linux下利用C语言递归遍历指定目录下的子目录(不含隐藏目录)和文件*/#include <stdio.h>#include <dirent.h>#include <string.h>void List(char *path){struct dirent *ent NULL;DIR *pDir;if((pDir opendir(path)) ! NULL){wh…

Java的多进程运行模式分析

本文曾发表于天极网&#xff1a;http://dev.yesky.com/284/2659284.shtml一般我们在java中运行其它类中的方法时&#xff0c;无论是静态调用&#xff0c;还是动态调用&#xff0c;都是在当前的进程中执行的&#xff0c;也就是说&#xff0c;只有一个java虚拟机实例在运行。而有…

HDU 2594 Simpsons’ Hidden Talents (字符串-KMP)

Simpsons’ Hidden Talents Problem DescriptionHomer: Marge, I just figured out a way to discover some of the talents we weren’t aware we had.Marge: Yeah, what is it?Homer: Take me for example. I want to find out if I have a talent in politics, OK?Marge: …

微信小程序几种常用弹窗提示

第一种&#xff1a;弹出提示框&#xff0c;可以选择确定或者取消。 代码&#xff1a;wx.showModal({title: 提示,content: 这是一个模态弹窗,success: function (res) {if (res.confirm) {//这里是点击了确定以后console.log(用户点击确定)} else {//这里是点击了取消以后conso…

[bash]删除文件中含特定字符串的行

]删除文件中含特定字符串的行[bash]: sed -e /abc/d a.txt // 删除a.txt中含"abc"的行&#xff0c;但不改变a.txt文件本身&#xff0c;操作之后的结果在终端显示 sed -e /abc/d a.txt > a.log // 删除a.txt中含"abc"的行&#xff0c;将操作之后的…

CSS之文档视图(DocumentView)和元素视图(ElementView)方法

1.elementFromPoint() 返回给定坐标处的元素。是个在目前而言&#xff0c;兼容性不错的方法 将给定位置处(100,100)的元素的字体颜色设置为红色 2.getBoundingClientRect() 返回的是返回的是一个对象&#xff0c;包含 top, left, right, 和 bottom四个属性值&#xff0c;大小…