vue之表单处理

vue之表单处理（一）

实验介绍

在日常的开发中，表单随处都被使用到，如：登录，问题反馈功能等。对表单的数据收集和绑定也是很常规的工作。在一般开发中处理表单，需要通过操作 DOM 来实现，是一个相对繁琐且低效率的工作。然而在 Vue 项目中你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。轻松地实现表单数据收集或绑定，提高了开发效率。它会根据控件类型自动选取正确的方法来更新元素。负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。接下来带领大家看看其基础用法。

知识点

  • v-model 指令
  • 基础用法
  • 值绑定
  • 修饰符

基本用法

常用表单元素

元素
input[type=*]文本输入框
textarea多行文本
radio单选按钮
checkbox复选框
select选择框

注意

注意一：v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。直接给元素 value 赋值不会生效的，你应该通过 JavaScript 在组件的 data 选项中声明初始值。

注意二：v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件，具体体现我们在表单 修饰符小节，给大家说明：

  • text 和 textarea 元素使用 value 属性和 input 事件（内部监听 input 事件）；
  • checkbox 和 radio 使用 checked 属性和 change 事件（内部监听 change 事件）；
  • select 字段将 value 作为 prop 并将 change 作为事件（内部监听 change 事件）。

说明： change 和 input 区别就是，input 实时更新数据，change 不是实时更新。

input 监听
请添加图片描述

change 监听
请添加图片描述
带着注意事项，进入 Vue 表单处理学习。

文本

直接为文本绑定 v-model 指令，在 data 数据项中声明绑定数据项，可以轻松完成双向数据绑定。让我们来看看神奇的 v-model 指令。
例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>syl-vue-test</title>
    <!-- 引入 vue.js -->
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input v-model="msg" placeholder="请输入..." />
      <p>输入的是: {{ msg }}</p>
    </div>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          msg: "",
        },
      });
    </script>
  </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25

运行结果：
请添加图片描述

多行文本

多行文本和文本用法相同，使用 v-model 指令，在实例 data 中声明绑定的 message 数据项，即可完成多行文本数据双向绑定。
例子：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <span>Multiline message is:</span>
      <p style="white-space: pre-line;">{{ message }}</p>
      <br />
      <textarea v-model="message" placeholder="add multiple lines"></textarea>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            message: "",
          };
        },
      });
    </script>
  </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28

运行效果：
请添加图片描述

单选按钮

将单选按钮绑定到同一个 picked，即可完成数据绑定，当第一个单选被选中 picked 的值为第一个单选按钮的 value，同样当第二个单选被选中 picked 的值为第二个单选按钮的 value。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- 将单选按钮绑定到同一个 picked -->
      <input type="radio" id="one" value="One" v-model="picked" />
      <label for="one">One</label>
      <br />
      <input type="radio" id="two" value="Two" v-model="picked" />
      <label for="two">Two</label>
      <br />
      <span>Picked: {{ picked }}</span>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            picked: "",
          };
        },
      });
    </script>
  </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

运行效果：
请添加图片描述

复选框

复选框绑定的是一个布尔值（true or false），同样在复选框元素上使用 v-model 指令，在实例 data 中声明 checked，即可完成复选框数据的双向绑定。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="checkbox" id="checkbox" v-model="checked" />
      <label for="checkbox">{{ checked }}</label>
    </div>
    <script>
      // 绑定布尔值
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            checked: false,
          };
        },
      });
    </script>
  </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

运行结果：
请添加图片描述

多个复选框

通常开发中，会用到多个复选框，那么我们就需要把复选框，绑定到同一个数组，方便数据收集。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <input type="checkbox" id="syl1" value="syl1" v-model="checkedNames" />
      <label for="syl1">syl1</label>
      <input type="checkbox" id="syl2" value="syl2" v-model="checkedNames" />
      <label for="syl2">syl2</label>
      <input type="checkbox" id="syl3" value="syl3" v-model="checkedNames" />
      <label for="syl3">syl3</label>
      <br />
      <span>Checked names: {{ checkedNames }}</span>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            checkedNames: [],
          };
        },
      });
    </script>
  </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

运行结果：
请添加图片描述
请添加图片描述

选择框

在 select 元素上使用 v-model 指令，可以绑定当前选中的 option。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>vue</title>
    <script src="vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <!-- select 标签是绑定  数据项 selected -->
      <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
      </select>
      <span>Selected: {{ selected }}</span>
    </div>
    <script>
      var vue = new Vue({
        el: "#app",
        data() {
          return {
            selected: "",
          };
        },
      });
    </script>
  </body>
</html>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

运行结果：
请添加图片描述

* * * 1. 1. 1.
点击查看代码 
<details>
<summary>点击查看代码</summary>
  • [ ]
</details>
posted @   Python喵  阅读(87)  评论(0)  编辑  收藏  举报
相关博文：
· Redis常用命令
· python实现RabbitMQ六种模式
· 微前端qiankun框架子应用主和应用之间通信方法
· 【Flink】复函数的使用，时间服务和定时器，值、列表、字典状态变量
· Vue利用slice()方法实现分页操作
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示