【愚公系列】《循序渐进Vue.js 3.x前端开发实践》013-Vue 组件的属性和方法:表单数据的双向绑定

举报
愚公搬代码 发表于 2025/02/28 23:14:38 2025/02/28
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。