<van-field>使用方案

2023-10-31

1.官方示例

<van-cell-group>
  <van-field
    value="{{ value }}"
    placeholder="请输入用户名"
    border="{{ false }}"
    bind:change="onChange"
  />
</van-cell-group>
Page({
  data: {
    value: '',
  },

  onChange(event) {
    // event.detail 为当前输入的值
    console.log(event.detail);
  },
});

可以看到对于输入框中数据的改变,是通过一个监听函数 bind:change=“onChange"实现的,那么value=”{{ value }}"有没有进行相对应的数据绑定呢???没有
笔者认为应当在监听函数中加上一句this.data. value= event.detail,这样data和页面还有输入框三者之前的数据就绑定在了一起
注册案例

<van-cell-group>
  <van-field
    bind:change="onChangeUsername"
    required
    clearable
    label="用户名"
    placeholder="请输入用户名"
  />

  <van-field
    bind:change="onChangePwd"
    required
    clearable
    type="password"
    label="密码"
    placeholder="请输入密码"
  />
</van-cell-group>
<van-button bindtap="register" type="primary">主要按钮</van-button>
data: {
    username:"",
    password:""
  },
  onChangeUsername(event) {
    //监听用户名输出并同步到username中
    this.data.username = event.detail
  },
  onChangePwd(event){
    //监听密码输入并同步到pwd中
    this.data.password = event.detail
  },
  register(){
    //监听按钮点击事件
    let username=this.data.username
    let pwd=this.data.password;
    console.log(username+"=="+pwd)
  }

在这里插入图片描述
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

<van-field>使用方案 的相关文章

随机推荐

  • linux设置http/https proxy及忽略proxy的方法

    一 场景 有些linux服务器处于内网 并且没有公网ip 故要想与外网进行http https通信只能通过nat或者加proxy的方式 nat服务器有网段的限制 而http https proxy代理则没有 使用起来也方便 但是 使用htt
  • 【mfc】学生信息管理,实现List控件节点的增删改查

    之前在mfc这个专栏里面 写了很多关于win32的程序 其实也没什么的 win32是mfc的基础 mfc只是win32的扩展 系统自带的扩展 新建一个mfc如同新建一个win32程序 不过这个win32程序一开始就带了很多空函数框架 一 基
  • PG库分页查询数据异常(数据重复、数据丢失)-- 解决一次生产问题

    问题描述 有一个功能更新数据库时在生产环境下突然存在部分记录未被更新 需要把所有的记录更新 采取的是分页进行更新 但是每次更新以后都会出现部分业务没有被更新 排查过程 1 测试环境重现问题 在测试环境重现问题 发现测试环境也有这个问题 2
  • PHP在linux上执行外部命令

    http www douban com note 211492486 一 PHP中调用外部命令介绍 在PHP中调用外部命令 可以用 1 gt 调用专门函数 2 gt 反引号 3 gt popen 函数打开进程 三种方法来实现 方法一 用PH
  • nRF52832学习记录(四、定时器)

    一 nRF52832 定时器基本介绍 nRF52832 包含了 5个定时器模块 定时器有着不同的位宽选择 8 16 24 32位 通过BITMODE 寄存器的 第 0 1 位 选择 nRF52832 的定时器的内部结构 1 时钟源 定时器工
  • MATLAB中范数norm()函数精讲

    1 Matlab中norm有两种形式 形式 1 n norm A 2 n norm A p p 范数 功能 A可以是向量 也可以是矩阵 根据p的不同 norm函数可计算几种不同类型的矩阵 向量 范数 1
  • SpringBoot入门教程

    作者简介 哪吒 CSDN2021博客之星亚军 新星计划导师 博客专家 哪吒多年工作总结 Java学习路线总结 搬砖工逆袭Java架构师 关注公众号 哪吒编程 回复1024 获取Java学习路线思维导图 大厂面试真题 加入万粉计划交流群 一起
  • 修改Xcode生成的版权信息 Copyright © 2016年 xxx. All rights reserved.

    修改Xcode生成的版权信息 Copyright 2016年 xxx All rights reserved 选中 xcodeproj工程文件 显示包含内容 打开project pbxproj文件 全文搜索ORGANIZATIONNAME
  • Linux操作系统管理-LVM

    1 物理卷管理 常用管理命令如下 root linux8 pvcreate dev nvme0n2 dev nvme0n3 Physical volume dev nvme0n2 successfully created Physical
  • VMware虚拟机上如何设置windows7虚拟系统与主机时间不同?

    每次打开虚拟机时 windows虚拟机的时间老是与主机时间相同 就很烦 如下设置虚拟机与主机时间不同步 在搜索栏输入 管理工具 2 打开管理工具 gt 服务 3 找到VMware Tools做如下设置 4 找到Windows Time做如下
  • AIX 软件安装与维护

    1 AIX 软件产品 2 软件包的构成 由一个或者多个package构成一个完整的LPP 一个LPP是一个完整的软件产品 这个软件包含与这个LPP相关的所有Package 一个软件包是由一组具有共同功能的文件集而组成的一个可单独安装的镜像
  • 异常的深入研究与分析(2)

    本文主要是关于异常的面试题目 出自前几年的迅雷 支付宝等名企的笔试题目 内容由金丝燕网原创编辑 转载请注明链接 题目一 考察异常类的继承结构 那个类是所有异常的基础类 A String B Error C Throwable D Runti
  • 铝电解电容的寿命计算(纹波电流法)手把手教你

    本文教你通过纹波电流预测铝电解电容的寿命 计算方法来自Nichicon 所以以Nichicon的电解电容为例 不同厂家的计算公式可能稍有不同 首先选一款铝电解电容为例 这里选择常见的LGN系列3000h 105 420V 470uF的电容
  • matlab找出二维矩阵中最大值的位置或者最小值的位置

    matlab寻找最大值或者最小值是通过max和min命令 对应二维矩阵寻找最大元素就是max max A 注意二维矩阵要写两个max 找对应位置用find函数 举个例子 gt gt A 1 2 3 4 5 6 A 1 2 3 4 5 6 g
  • android 为什么使用dp单位,它的真正优势在哪里?

    一些新手开发人员 不是很明白dp的真正好处 只是知道这样用 那么今天我用我的理解来解释下 有不对之处 欢迎指正 什么是dp dp是一种与像素密度无关的单位 那什么是像素密度呢 先来解释下像素密度 像素密度 就是所谓的dpi 每英寸像素的数量
  • 零基础入门语义分割-Task1 赛题理解

    1 3 数据标签 赛题为语义分割任务 因此具体的标签为图像像素类别 在赛题数据中像素属于2类 无建筑物和有建筑物 因此标签为有建筑物的像素 赛题原始图片为jpg格式 标签为RLE编码的字符串 RLE全称 run length encodin
  • Chrome OS 初体验

    今天Google放出了Chrome OS的源码 很快网上有人把它编译成功在虚拟机上跑了起来 有朋友第一时间把虚拟镜像下载了 于是搞来一份 立刻开始体验 安装过程就不多说了 可以参考谷奥上的Chromium OS 安装教程 我用的是VMWar
  • Vue中replace的用法

    Vue js V 啥也不说了 就是这么牛逼
  • ps 2019安装破解以及添加CUR和ICO插件

    下载最新版 2019版 的PS后 只能使用和登陆 挺麻烦的 就想着破解来着 在网上搜索了一大圈 终于解决了 使用之前的替换amtlib dll的方式不适用了 需要替换ps的启动程序 ps 64位的安装路径为C Program Files A
  • <van-field>使用方案

    1 官方示例