【无标题】vue中表单绑定v-model

news/2024/11/15 3:33:07/

表单绑定v-model

表单控件在实际开发中是非常常见的。特别是对于用户信息的提交,需要大量的表单。
Vue中使用v-model指令来实现表单元素和数据的双向绑定。
案例的解析:
当我们在输入框输入内容时
因为input中的v-model绑定了message,所以会实时将输入的内容传递给message,message发生改变。
当message发生改变时,因为上面我们使用Mustache语法,将message的值插入到DOM中,所以DOM会发生响应的改变。
所以,通过v-model实现了双向的绑定。
当然,我们也可以将v-model用于textarea元素
在这里插入图片描述

在这里插入图片描述

v-model原理

v-model其实是一个语法糖,它的背后本质上是包含两个操作:
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
也就是说下面的代码:等同于下面的代码:

<input type="text" v-model="message">
等同于
<input type="text" v-bind:value="message" v-on:input="message = $event.target.value">

在这里插入图片描述

v-model:radio

当存在多个单选框时
在这里插入图片描述

v-model:checkbox

复选框分为两种情况:单个勾选框和多个勾选框
单个勾选框:
v-model即为布尔值。
此时input的value并不影响v-model的值。
多个复选框:
当是多个复选框时,因为可以选中多个,所以对应的data中属性是一个数组。
当选中某一个时,就会将input的value添加到数组中。
在这里插入图片描述
在这里插入图片描述

v-model:select

  • 和checkbox一样,select也分单选和多选两种情况。
  • 单选:只能选中一个值。
    v-model绑定的是一个值。
    当我们选中option中的一个时,会将它对应的value赋值到mySelect中
  • 多选:可以选中多个值。
    v-model绑定的是一个数组。
    当选中多个值时,就会将选中的option对应的value添加到数组mySelects中

在这里插入图片描述

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

修饰符

  • lazy修饰符:
    • 默认情况下,v-model默认是在input事件中同步输入框的数据的。
    • 也就是说,一旦有数据发生改变对应的data中的数据就会自动发生改变。
    • lazy修饰符可以让数据在失去焦点或者回车时才会更新:
  • number修饰符:
    • 默认情况下,在输入框中无论我们输入的是字母还是数字,都会被当做字符串类型进行处理。
    • 但是如果我们希望处理的是数字类型,那么最好直接将内容当做数字处理。
    • number修饰符可以让在输入框中输入的内容自动转成数字类型:
  • trim修饰符:
    • 如果输入的内容首尾有很多空格,通常我们希望将其去除
    • trim修饰符可以过滤内容左右两边的空格
      在这里插入图片描述

http://www.ppmy.cn/news/554523.html

相关文章

android 蓝牙键盘驱动安装失败,Android系统使用蓝牙键盘的问题

类型:源码相关大小:23.6M语言:中文 评分:9.1 标签: 立即下载 最新收到的消息称2.2的系统就可以直接使用 1.最令人期待的功能之一就是在2.2 Froyo中加入了对USB/蓝牙键盘的支持。众所周知,Android系统主要是靠全触控操作来控制,对于一些商务功能(比如快速的输入)就需要硬…

android 蓝牙键盘_如何在您的Android设备上使用蓝牙键盘

android 蓝牙键盘 More and more, people are starting to discover that tablets make decent productivity tools. With devices like the Microsoft Surface and iPad Pro becoming more popular, you may be looking to create something similar with your Android device…

android实现蓝牙键盘,android – 如何与蓝牙键盘通话?

我写了一个连接蓝牙键盘的Android应用程序.它通过BT套接字连接到键盘并获取套接字的输入流. InputStream inStrm socket.getInputStream(); 接下来我尝试读取输入流,但它说没有可用的字节. int nBytesAvail inStrm.available(); // always gives me 0 要么 int dataByte inS…

linux命令行连接蓝牙键盘

在KDE的图形界面连接蓝牙设备非常的方便&#xff0c;图形化点点就行了。 图形化连接 基础 #安装 sudo pacman -S bluez bluez-utils #开机启动 sudo systemctl enable bluetooth.service #立即开启 sudo systemctl start bluetooth.service蓝牙图形化管理工具安装 sudo pa…

【85 backtrader-cs因子测试的一些高级技巧-2】使用cython、c语言和c++加速某些函数的计算

在上一篇文章:【85 backtrader-cs因子测试的一些高级技巧】使用numba加速某些函数的计算中,使用了numba改进某些函数,实现加速,在这一篇文章中,尝试接着上一篇文章的主题,继续尝试用cython,c语言和c++尝试改进decayliear函数的计算速度。 结论: 从图上似乎可以得到下面…

【数据库必备知识】索引和事务

数据库系列文章 1. 零基础带你快速上手SQL语言2. 玩转表及其数据3. 上手表设计 4. 索引和事务 目录 &#x1f4d6;前言 1. 索引 1.1 索引的概念 1.2 索引的作用 1.3 索引的使用场景 1.4 索引的使用 1.5 索引背后的数据结构(B树) 2. 事务 2.1 事务的概念 2.2 数据库使…

BZOJ 4311 向量

留坑 转载于:https://www.cnblogs.com/zzyer/p/8504519.html

4311 编写递归函数getPower计算x的y次方

【题目描述】 编写递归函数getPower计算x的y次方&#xff0c;在同一个程序中针对整型和实型实现两个重载的函数(当y<0时&#xff0c;返回0)&#xff1a; int getPower(int x, int y); //整型版本 double getPower(double x, int y); //实型版本 在主程序中实现输入输出&…