【愚公系列】《循序渐进Vue.js 3.x前端开发实践》013-Vue 组件的属性和方法：表单数据的双向绑定
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。博客内容.NET、...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。 |
| 近期荣誉 | 2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。 |
| 博客内容 | .NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。 |
| 欢迎 | 👍点赞、✍评论、⭐收藏 |
🚀前言
在现代 Web 开发中，表单是与用户交互的重要组成部分，而数据的管理与同步则是确保良好用户体验的关键。Vue.js 作为一个灵活而强大的前端框架，通过其独特的双向绑定机制，使得表单数据的处理变得更加简单和高效。无论是文本输入框、选择框还是复选框，Vue 能够轻松实现视图与数据的实时同步。
本文将深入探讨 Vue 组件中的双向绑定特性，重点分析如何利用 v-model 指令实现表单数据的高效管理。我们将通过实际示例，逐步理解双向绑定的原理及其在不同表单元素中的应用场景，帮助你掌握这一强大功能。无论你是刚入门的开发者，还是希望精进技能的程序员，这篇文章都将为你提供实用的技巧和深入的见解，让你在构建表单时游刃有余。让我们一起探索 Vue 的双向绑定世界，提升你的开发效率与用户体验！
🚀一、表单数据的双向绑定
双向绑定是 Vue 中处理用户交互的一种方式，例如文本输入框、多行文本输入区域、单选框多选框等都可以进行数据的双向绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表单输入</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
<!-- <input v-model.lazy="textField"/>
<p>文本输入框内容:{{textField}}</p> -->
<input v-model.trim="textField"/>
<p>文本输入框内容:{{textField}}</p>
<br/>
<textarea v-model="textarea">AAA</textarea>
<p style="white-space: pre-line;">多行文本内容:{{textarea}}</p>
<input type="checkbox" v-model="checkbox"/>
<p>{{checkbox}}</p>
<br />
<input type="checkbox" value="足球" v-model="checkList"/>足球
<input type="checkbox" value="篮球" v-model="checkList"/>篮球
<input type="checkbox" value="排球" v-model="checkList"/>排球
<p>{{checkList}}</p>
<hr />
<input type="radio" value="男" v-model="sex"/>男
<input type="radio" value="女" v-model="sex"/>女
<p>{{sex}}</p>
<hr />
<select v-model="select">
<option>男</option>
<option>女</option>
</select>
<p>{{select}}</p>
<hr />
<select v-model="selectList" multiple>
<option>足球</option>
<option>篮球</option>
<option>排球</option>
</select>
<p>{{selectList}}</p>
</div>
<script>
const {createApp, ref} = Vue
const App = {
setup() {
const textField = ref("")
const textarea = ref("")
const checkbox = ref(false)
const checkList = ref([])
const sex = ref("")
const select = ref("")
const selectList = ref([])
return {textField, textarea, checkbox, checkList, sex, select, selectList}
}
}
createApp(App).mount("#Application")
</script>
</body>
</html>
这段代码展示了Vue中表单数据的双向绑定，通过v-model指令将表单元素与数据绑定，实现数据的同步更新。代码实现了文本输入框、多行文本输入区域、复选框与单选框、选择列表的绑定，还使用了v-model的3个常用修饰符。
🔎1.文本输入框
<input v-model.trim="textField"/>
<p>文本输入框内容: {{ textField }}</p>
- 描述：这是一个单行文本输入框，绑定到
textField变量。 - 功能：输入内容实时同步到
textField变量。 - 修饰符：
trim修饰符：自动移除用户输入两端的空格。- 作用：比如输入空格+文字时，会将前后的空格去掉后更新到
textField，确保数据整洁。
🔎2.多行文本输入区域
<textarea v-model="textarea">AAA</textarea>
<p style="white-space: pre-line;">多行文本内容: {{ textarea }}</p>
- 描述：这是一个多行文本输入区域，绑定到
textarea变量。 - 功能：文本区域内容的换行将直接绑定到
textarea变量。 - 显示：
<p style="white-space: pre-line;">确保了文本中的换行能在页面上正确显示。
🔎3.复选框与单选框
-
复选框（单一值）：
<input type="checkbox" v-model="checkbox"/> <p>{{ checkbox }}</p>- 描述：此复选框绑定到
checkbox变量，表示单一布尔值（选中为true，取消选中为false）。
- 描述：此复选框绑定到
-
复选框（多选）：
<input type="checkbox" value="足球" v-model="checkList"/>足球 <input type="checkbox" value="篮球" v-model="checkList"/>篮球 <input type="checkbox" value="排球" v-model="checkList"/>排球 <p>{{ checkList }}</p>- 描述：绑定到数组
checkList，每选中一个选项，其value值将被添加到数组，取消选中则从数组中移除。 - 功能：允许用户多选，适用于表示多选项的场景。
- 展示：页面上会显示数组内容的变化。
- 描述：绑定到数组
-
单选框：
<input type="radio" value="男" v-model="sex"/>男 <input type="radio" value="女" v-model="sex"/>女 <p>{{ sex }}</p>- 描述：绑定到
sex变量，选中某个单选框后，将该单选框的value赋值给sex。 - 功能：在性别选择时较为常用，只允许选择一个选项。
- 描述：绑定到
🔎4.选择列表
-
单选选择列表：
<select v-model="select"> <option>男</option> <option>女</option> </select> <p>{{ select }}</p>- 描述：绑定到
select变量，用户选择选项后将该选项的值赋给select。 - 功能：页面显示用户所选择的单一值。
- 描述：绑定到
-
多选选择列表：
<select v-model="selectList" multiple> <option>足球</option> <option>篮球</option> <option>排球</option> </select> <p>{{ selectList }}</p>- 描述：绑定到
selectList数组，允许用户选择多个选项。 - 功能：选中多个选项后，页面会显示一个包含所有选项值的数组。
- 描述：绑定到
🔎5. 3个常用的修饰符
在Vue的v-model中，有三个常用修饰符分别用于不同场景的数据绑定优化：
.lazy：仅在输入失去焦点时更新绑定数据，而不是在每次输入时更新。适用于需要减少实时更新次数的场景，如表单提交前的校验。.trim：用于去除输入内容的首尾空格，适用于需要格式化输入内容的场景。.number：自动将输入内容转为数字类型，适用于数值输入框，避免用户输入非数字字符。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）