[Vue]v-model收集表单数据

最新推荐文章于 2024-04-18 20:39:19 发布

小炜1128

最新推荐文章于 2024-04-18 20:39:19 发布

阅读量664

点赞数 1

分类专栏： Vue 学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_53022813/article/details/127232882

版权

Vue 学习笔记专栏收录该内容

90 篇文章 29 订阅

订阅专栏

前言

系列文章目录：
[Vue]目录
老师的课件笔记，不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU

笔记在线版： https://note.youdao.com/s/5vP46EPC

视频：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

文章目录

前言
1. 用于数据收集的页面
2. 输入框的数据收集
3. 单选框(radio)的数据收集
4. 复选框(checkbox)的数据收集
5. 下拉选择框(select)的数据收集
6. textarea的数据收集
7. 复选框收集checked值
8. v-model修饰符
9. v-model收集表单数据完整代码
10. 总结收集表单数据

1. 用于数据收集的页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>收集表单数据</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<form @submit.prevent="demo">
				账号：<input type="text" > <br/><br/>
				密码：<input type="password" > <br/><br/>
				年龄：<input type="number" > <br/><br/>
				性别：
				男<input type="radio" name="sex" >
				女<input type="radio" name="sex" > <br/><br/>
				爱好：
				学习<input type="checkbox" >
				打游戏<input type="checkbox" >
				吃饭<input type="checkbox" >
				<br/><br/>
				所属校区
				<select >
					<option value="">请选择校区</option>
					<option value="beijing">北京</option>
					<option value="shanghai">上海</option>
					<option value="shenzhen">深圳</option>
					<option value="wuhan">武汉</option>
				</select>
				<br/><br/>
				其他信息：
				<textarea ></textarea> <br/><br/>
				<input type="checkbox" >阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
				<button>提交</button>
			</form>
		</div>
	</body>
</html>

2. 输入框的数据收集

<!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>Document</title>
  </head>
  <body>
    <div id="root">
      账号：<input type="text" v-model="account" /> <br /><br />
      密码：<input type="password" v-model="password" /> <br /><br />
      {{account}} -- {{password}}
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        account: '',
        password: ''
      },
    })
  </script>
</html>

3. 单选框(radio)的数据收集

由于v-model默认收集的为表单的value属性的值，所以使用v-model收集单选框的数据时，需要先为单选框标签设置value及其对应的值。

<!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>Document</title>
  </head>
  <body>
    <div id="root">
      性别：
      <!-- 
        由于v-model默认收集的为表单的value属性的值，
        所以要为单选框标签设置value及其对应的值。 

		将收集到的value值放到data中的sex
      -->
	  男<input type="radio" name="s" v-model="sex" value="male">
	  女<input type="radio" name="s" v-model="sex" value="female"> <br/><br/>
      性别：{{sex}}
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        // 性别默认为男性
        sex: 'male'
      },
    })
  </script>
</html>

4. 复选框(checkbox)的数据收集

对于复选框，如果没有指定value属性，则v-model默认收集的为复选框表单上的checked属性的值(true/false)。
如果用于存放收集到的复选框信息的变量不为数组类型，会导致一个勾选全部勾选(v-model的双向绑定)。因为对于不为数组的变量只能放置一个值，所以v-model只能收集其中一个的checked属性的值，由于v-model的双向绑定性质，会导致其他选项出现同样的选择。
所以对于复选框也需要配置value属性及其值，同时收集数据的变量的数据类型要为数组类型。

<!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>Document</title>
  </head>
  <body>
    <div id="root">
			爱好：
      <!-- 收集到的数据存放在hobby上 -->
      学习<input type="checkbox" v-model="hobby" value="study">
      打游戏<input type="checkbox" v-model="hobby" value="game">
      吃饭<input type="checkbox" v-model="hobby" value="eat">
      <br/><br/>
      爱好：{{hobby}}
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        // 对于复选框，用于存放收集数据的变量
        // 初始值要为数组
        hobby: []
      },
    })
  </script>
</html>

5. 下拉选择框(select)的数据收集

<!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>Document</title>
  </head>
  <body>
    <div id="root">
			所属校区: 
      <select v-model="city">
        <option value="">请选择校区</option>
        <option value="beijing">北京</option>
        <option value="shanghai">上海</option>
        <option value="shenzhen">深圳</option>
        <option value="wuhan">武汉</option>
      </select>
      <br/><br/>
      所属校区: {{city}}
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        // 默认选择 北京
        city: 'beijing'
      },
    })
  </script>
</html>

6. textarea的数据收集

<!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>Document</title>
  </head>
  <body>
    <div id="root">
			其他信息：
			<textarea v-model="other"></textarea> <br/><br/>
      其他信息: {{other}}
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        other: ''
      },
    })
  </script>
</html>

7. 复选框收集checked值

<input type="checkbox">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>

对于此种情况的复选框，我们只需要收集复选框选择/不选的信息即可，此时不要value值，所以不需要配置value值，可以直接收集其checked的值即可。

<!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>Document</title>
  </head>
  <body>
    <div id="root">
			<input type="checkbox" v-model="agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
      是否同意: {{agree}}
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#root',
      data: {
        agree: ''
      },
    })
  </script>
</html>

8. v-model修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	`<input v-model.number="age" />`
.trim	自动去除用户输入的首尾空白字符	`<input v-model.trim="msg" />`
.lazy	在失去焦点时更新数据	`<input v-model.lazy="msg" />`

9. v-model收集表单数据完整代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>收集表单数据</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  </head>
  <body>
    <!-- 准备好一个容器-->
    <div id="root">
		<!-- 阻止表的的默认事件 -->
      <form @submit.prevent="demo">
		<!-- v-model.trim 去除用户输入的两端的空白字符 -->
        账号：<input type="text" v-model.trim="userInfo.account" /> <br /><br />
        密码：<input type="password" v-model="userInfo.password" /> <br /><br />
		<!-- type="number" 只允许输入数字， v-model.number 将输入的内容的数据类型转为数字类型 -->
        年龄：<input type="number" v-model.number="userInfo.age" /> <br /><br />
        性别： 男<input type="radio" name="sex" v-model="userInfo.sex" value="male" /> 女<input type="radio" name="sex" v-model="userInfo.sex" value="female" /> <br /><br />
        爱好： 学习<input type="checkbox" v-model="userInfo.hobby" value="study" /> 打游戏<input type="checkbox" v-model="userInfo.hobby" value="game" /> 吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat" /> <br /><br />
        所属校区
        <select v-model="userInfo.city">
          <option value="">请选择校区</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
          <option value="wuhan">武汉</option>
        </select>
        <br /><br />
        其他信息：
		<!-- v-model.lazy 在失去焦点时才进行数据的更新 -->
        <textarea v-model.lazy="userInfo.other"></textarea> <br /><br />
        <input type="checkbox" v-model="userInfo.agree" />阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
        <button>提交</button>
      </form>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
      el: '#root',
      data: {
		// 将用户信息写成对象形式
        userInfo: {
          account: '',
          password: '',
          age: 18,
          sex: 'female',
          hobby: [],
          city: 'beijing',
          other: '',
          agree: '',
        },
      },
      methods: {
        demo() {
			// 显示用户信息
          console.log(JSON.stringify(this.userInfo))
        },
      },
    })
  </script>
</html>

10. 总结收集表单数据

若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若：<input type="checkbox"/>
- 1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
- 2.配置input的value属性:
  - (1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
  - (2)v-model的初始值是数组，那么收集的的就是value组成的数组
备注：v-model的三个修饰符：
- lazy：失去焦点再收集数据
- number：输入字符串转为有效的数字
- trim：输入首尾空格过滤

小炜1128

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[Vue]v-model收集表单数据

1. 用于数据收集的页面2. 输入框的数据收集3. 单选框(radio)的数据收集4. 复选框(checkbox)的数据收集5. 下拉选择框(select)的数据收集6. textarea的数据收集7. 复选框收集checked值8. v-model修饰符9. v-model收集表单数据完整代码10. 总结收集表单数据
复制链接

扫一扫