vue3-表单输入绑定

表单输入绑定

获取表单输入的值方式:

  1. 手动连接值绑定和更改事件监听器

  2. v-model 指令 (常用)

<script lang="ts" setup>
import { ref } from "vue"
// 定义个变量接收输入的内容:
const text = ref("111")
const text2 = ref("222")</script><template><div class="container"><section><!-- 输入内容通过事件绑定值: --><p>默认的value是 111</p><input :value="text" @input="event => text = event?.target?.value" /><div>这是输入的值{{ text }}</div></section><section><!-- v-model 指令帮我们简化了这一步骤 --><p>默认的value是 222</p><input v-model="text2" value="888"><div>这是输入的值{{ text2 }}</div></section></div>
</template><style lang="scss" scoped>
.container {section {margin-bottom: 20px;}
}
</style>

示例:

v-model 还可以用于各种不同类型的输入元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合

表单类型绑定属性值绑定事件
inputvalueinput
textareavalueinput
checkboxcheckedchange
radiochecked

change

selectvaluechange

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。

比如下面 888 值不显示 无效的

<input v-model="text2" value="888">

表单基本用法

  1. 文本

  2. 多行文本

  3. 复选框

  4. 单选按钮

  5. 选择器

<script lang="ts" setup>
import { ref } from "vue"
// 定义个变量接收输入的内容:
const f1 = ref("f1的默认值")
const f2 = ref("f2的默认值")
const f3 = ref(true)
const f4 = ref([])
const f5 = ref('女')
const f6 = ref('深圳')</script><template><div class="container"><section><p>input输入框</p><p>f1的值是: {{ f1 }}</p><input v-model="f1" placeholder="请输入" /></section><section><p>多行文本</p><!-- 错误 --><!-- <textarea>{{ text }}</textarea> --><p>f2的值是: {{ f2 }}</p><!-- 正确 --><textarea v-model="f2" rows="3"></textarea></section><section><p>复选框</p><p>单个</p><input type="checkbox" id="checkbox" v-model="f3" /> <label for="checkbox">统一协议</label><br><label for="checkbox">f3的值是:{{ f3 }}</label><br><br><p>多个</p><input type="checkbox" id="h1" value="篮球" v-model="f4" /> <label for="h1">篮球</label><input type="checkbox" id="h2" value="足球" v-model="f4" /> <label for="h2">足球</label><input type="checkbox" id="h3" value="排球" v-model="f4" /> <label for="h3">兵乓球</label><br><label for="checkbox">f4的值是:{{ f4 }}</label></section><section><p>单选按钮</p><p>f5的值是: {{ f5 }}</p><input type="radio" id="one" value="男" v-model="f5" /><label for="one">男</label><input type="radio" id="two" value="女" v-model="f5" /><label for="two">女</label></section><section>选择器<div>f6的值是 : {{ f6 }}</div><select v-model="f6" multiple><option disabled value="">请选择一个你喜欢的城市</option><option>北京</option><option>上海</option><option>深圳</option><option>广州</option></select></section></div>
</template><style lang="scss" scoped>
.container {section {margin-bottom: 20px;}label {margin-right: 10px;}select {margin: 20px;padding: 20px;}
}
</style>

示例:

复选框 true-value 和 false-value 属性

<inputtype="checkbox"v-model="toggle"true-value="yes"false-value="no" />// 动态渲染
<inputtype="checkbox"v-model="toggle":true-value="dynamicTrueValue":false-value="dynamicFalseValue" />

true-value 和 false-value 是 Vue 特有的 attributes,仅支持和 v-model 配套使用。

  • 这里 toggle 属性的值会在选中时被设为 'yes',取消选择时设为 'no'。你同样可以通过 v-bind 将其绑定为其他动态值:

选择器,非字符串类型的值绑定

...
...const selected = ref({ number: 111 })
...
...<section><p>selected 的值是:{{ selected }}</p><select v-model="selected"><!-- 内联对象字面量 --><option :value="{ number: 111 }">111</option><option :value="{ number: 222 }">222</option></select></section>

示例:

修饰符

  • .lazy 每次 change 事件后更新数据 (节流)

  • .number 用户输入自动转换为数字

  • .trim 自动去除用户输入内容中两端的空格

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" /><input v-model.number="age" /><input v-model.trim="msg" />

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

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

相关文章

PMP冲突解决策略:项目经理的必备技能

原创不易&#xff0c;你们的点赞收藏是我创作的动力&#xff01; 在项目管理领域&#xff0c;冲突是不可避免的现象。作为项目经理&#xff0c;掌握有效的冲突解决策略至关重要。本文将为您详细介绍PMP&#xff08;项目管理专业&#xff09;中常用的几种冲突解决策略&#xff…

Android studio Sqlite数据库应用设计

一、添加依赖项: 在项目的build.gradle文件中添加以下依赖项:implementation androidx.sqlite:sqlite:2.2.0 二、创建SQLite数据库: 创建一个继承自SQLiteOpenHelper的类,用于管理数据库的创建和版本控制。在该类中定义数据库的表和列,并实现数据库的创建和更新。 publi…

rviz可视化机械臂(python)

一、准备的东西 一个机械臂的urdf 规划的路径点 二、launch文件的撰写 1.初始化 <?xml version"1.0" encoding"utf-8"?> <launch><param name"robot_description" textfile"机械臂.urdf" /><node name&qu…

开发常用的核验类API,含免费次数

核验类API 实名认证&#xff08;身份证二要素&#xff09;&#xff1a;核验身份证二要素&#xff08;姓名和身份证号码&#xff09;信息是否一致。实人认证&#xff08;人像三要素&#xff09;&#xff1a;输入姓名、身份证号码和一张人脸照片&#xff0c;与公安库身份证头像进…

Kotlin-控制流程

&#x1f4d1;前言 本文主要是【Kotlin】——Kotlin-控制流程的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1f304;每日一句…

vue:状态管理库及其部分原理(Vuex、Pinia)

1、为什么要用状态管理库&#xff1f; 多组件的状态共享问题&#xff1a; 当多个组件需要访问和修改相同的数据时&#xff0c;我们需要在组件之间传递 props或者使用事件总线。当&#xff0c;应用就会变得难以维护和调试。 多组件状态同步问题&#xff1a; 当一个组件修改了状…

mac下配置git自定义快捷命令

1. 指定自定义别名 vi ~/.bash_profile open ~/.bash_profile 配置环境变量,插入类似下面的内容 .bash_profile文件 alias gcgit checkout alias gmgit commit -m alias gcbgit checkout -balias gtgit statusalias gagit add .alias glggit logalias gdgit diffalias gr…

mysql安装及部署

1.在/usr/local下创建mysql目录 cd /usr/local mkdir /mysql 2.在mysql目录中下载 cd mysql/ wget https://cdn.mysql.com/archives/mysql-8.0/mysql-8.0.34-1.el9.x86_64.rpm-bundle.tar 3.解压 tar xvf mysql-8.0.34-1.el9.x86_64.rpm-bundle.tar 4.安装 dnf localinst…

Ivanti Connect Secure 曝两大零日漏洞,已被大规模利用

威胁情报公司Volexity发现&#xff0c;影响 Ivanti 的 Connect Secure VPN 和 Policy Secure 网络访问控制 (NAC) 设备的两个零日漏洞正在被大规模利用。自1月11日开始&#xff0c;多个威胁组织在大范围攻击中利用CVE-2023-46805身份验证绕过和CVE-2024-21887命令注入漏洞。 V…

vue如何通过$http的post方法请求下载二进制的Excel文件

方式一&#xff1a;单独接口,接口封装 特定的service.js 1.下载 //下载 export function getReportTemplate(){return new Promise((resolve, reject) > {axios({method: post,url: /fas/engine/web/fund/final/template,responseType: "blob",headers: {Conten…

分类问题:人工神经网络(ANN)+BP算法(误差后向传播)+考试例题讲解

学习链接:分类问题:人工神经网络(ANN)+BP算法(误差后向传播)+考试例题讲解 资料链接:链接:https://pan.baidu.com/s/1ijvMQmwtRgLO4KDSsNODMw 提取码:vyok 神经网络的应用非常的广,它核心思想非常简单,就是人是如何认知感知并且处理这个世界中的现实问题的。…

[C++] opencv - copyTo函数介绍和使用案例

copyTo函数介绍 copyTo函数是OpenCV库中的一个成员函数&#xff0c;用于将一个Mat对象的内容复制到另一个Mat对象中。 函数原型&#xff1a; void cv::Mat::copyTo(OutputArray m) const;void cv::Mat::copyTo(OutputArray m, InputArray mask) const; 参数说明&#xff1a;…

大创项目推荐 深度学习的水果识别 opencv python

文章目录 0 前言2 开发简介3 识别原理3.1 传统图像识别原理3.2 深度学习水果识别 4 数据集5 部分关键代码5.1 处理训练集的数据结构5.2 模型网络结构5.3 训练模型 6 识别效果7 最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 深度学习…

数据库的设计模式

数据库的设计模式常用于处理特定类型的数据和需求。以下是一些常见的模式&#xff1a; 1. EAV&#xff08;Entity-Attribute-Value&#xff09; 用途&#xff1a;用于非结构化或高度可变的数据模型。描述&#xff1a;实体以行形式存储&#xff0c;属性和值作为额外的表格列存…

01|js包管理工具和原理分析:npm安装机制及企业级部署私服原理

01 | js包管理工具和原理分析&#xff1a;npm安装机制及企业级部署私服原理 前端工程化离不开 npm 或者 Yarn 管理工具 通过script串联起各个职能部分&#xff0c;让独立的环节自动运转起来。 npm和yarn体系特别庞大&#xff0c;在使用依赖时可能出现以下疑问 删除node_module…

数据结构之基本数据类型(Python)

前言 接下来我们将会先学习Python 的基本数据类型&#xff0c;以及堆、栈、链表、树和图等数据结构&#xff0c;这是学习算法的基础。套用行业内的一句话&#xff1a; 数据结构是算法的骨骼。 数据结构是一门庞大的学科&#xff0c;远不是一本书就可以讲清楚的。如果想更深入地…

安全跟我学|这些网络安全知识,请务必牢记

随着“互联网”时代的到来&#xff0c;人们的生活变得更加便利&#xff0c;但电信诈骗、信息泄露、网络谣言、恶意软件等也随之而来。面对网络这把双刃剑&#xff0c;如何绷紧思想“安全弦”&#xff0c;正确安全使用网络呢&#xff1f;带着这些疑问&#xff0c;让我们一起来学…

【不需要网络不需要显卡】本地部署GPT

【不需要网络/不需要显卡】本地部署GPT 大家好&#xff0c;我是老 J 我们都知道ChatGPT目前只有两种使用方式&#xff0c;一种是直接去官网访问&#xff0c;适合个人用户&#xff1b;另一种是API调用&#xff0c;适合企业或者网站使用。这两种方式的门槛都比较高&#xff0c;…

springboot105基于保信息学科平台系统设计与实现

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的基于保信息学科平台系统设计与实现 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 …

PXE批量高效网络装机

总结 1实验流程只能抄老师&#xff0c;记忆浅 2排错能力几乎无 3 指令用的太死&#xff0c; 一 系统装机的三种引导方式 启动 操作 系统 1.硬盘 2.光驱&#xff08;u盘&#xff09; 3.网络启动 pxe 重装系统&#xff1f; 在已有操作系统 新到货了一台服务器&#xff…