「这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战」。

用于在不操作DOM的情况下，快速获取表单数据

注意：只有在表单元素中使用v-model才有意义 。

input输入框(type= text/radio/checkbox...)
textarea
select

<div id="app">
	<input type="text" v-mode="username">  <!-- 让文本框的内容与某个数据双向绑定 -->
  <!-- 在使用v-model的时候不用再写value，因为v-model指令在底层封装的时候就对监听了文本框的value值的变化 -->
  <input type="text" :value="username">
  <!-- 双向数据绑定与单向数据绑定 -->
  <!-- 单向数据绑定：数据源的改动会同步到页面上，但页面输入的数据不会影响到数据源的数据 -->
  
  <select v-model="city">
     <option value="">请选择你的城市</option>
     <option value="1">北京</option>
     <option value="2">上海</option>
     <option value="3">广州</option>
     <option value="4">深圳</option>
  </select>
</div>

const vm = new Vue({
	el: '#app',
  data: {
  	username:'zhangsan',
    city: ''		// city为空，默认选中“请选择你的选择城市”的选项。可以设置数字来选定默认的选项
  },
  methods: {

  }         
})

v-model指令的修饰符

.number 自动将用户输入的值转化为数值类型( 用户在输入框输入的都是字符串 )

.trim 自动过滤用户输入的首位空白字符

.lazy 在"change"时而非"input"时更新（如：textarea里面输入时并没有实时获取，而是当输入框失去焦点时内容才被获取）

<div id="app">
	<input type="text" v-mode.number="n1"> + <input type="text" v-mode.number="n2"> = {{ n1 + n2 }}
  <!-- 注意：文本框获取的都是字符串，进行四则运算得进行数据类型转换 -->
  <!-- 使用.number修饰符，就能将字符串转化为数字型 -->
  
  <!-- 也可以将type设置为number，这样就只能输入数字而不能输入其他类型的字符 -->
  <input type="number" v-mode.number="n1">
 
</div>

const vm = new Vue({
	el: '#app',
  data: {
  	n1: 1,
    n2: 2
  },
  methods: {

  }         
})

补充：

v-model与其他表单元素的绑定

1. 单选按钮

在单选按钮中先设置一个value值

<template>
	<div id="root">
  	// 单选按钮设置相同的name属性，实现多选一的效果

		性别：男<input type="radio" name="sex" v-model="sex">
		女<input type="radio" name="sex" v-model="sex">

  </div>	
</template>

<script>
	export default {
    el: "#root"
  	data: {
    	sex: ''
    }
  }
</script>
// 直接使用v-model绑定radio与data中的sex时，无论点击哪个按钮，都不能获取到选定的按钮，调试工具中data中的sex为null

解决方法：要在单选按钮中先设置一个value值，因为v-mdoel是与value绑定的

2. 复选框checkbox

首先要给每个复选框设置value值，然后在data中要用一个数组来与v-model绑定(因为复选框可以选中多个value值，所以要用数组来接收)

<template>
	<div id="root">
  	// 单选按钮设置相同的name属性，实现多选一的效果

		性别：男<input type="radio" name="sex" v-model="sex">
		女<input type="radio" name="sex" v-model="sex">
	
		爱好：
    抽烟<input type="checkbox" value="smoking" v-model="hobby"> 
    喝酒<input type="checkbox" value="drinking" v-model="hobby">  
    烫头<input type="checkbox" value="tangtou" v-model="hobby"> 
    
    <input type="checkbox" v-model="agree"> 已阅读并接收此协议

  </div>	
</template>

<script>
	export default {
    el: "#root"
  	data: {
    	hobby: [],		// v-model对应的值要用数组来接收，因为复选框可以选中多个value
      agree: 'false'		// 默认为false，即不勾选状态
    }
  }
</script>

注意：如果是只有一个复选框，勾选是否同意的情形，则不需要配置value，也不需要在data中设置数组来与v-model绑定。直接让v-model绑定一个布尔值的变量agree

补充：

如何收集表单的数据？

在data中可以用一个userinfo对象来包裹获取到的表单的值，然后再表单提交的时候(from绑定submit方法)，处理函数中使用JSON.stringify( )方法将userinfo对象转化为字符串，输出就可以看到收集的表单数据

注意还要阻止表单提交时自动跳转的默认行为

跋尾

本篇内容就到这里了~ 我是Zeus👩🏻‍🚀来自一个互联网底层组装员，下一篇再见！ 📖

🤟🏼 冇事来学系--Vue2.0双向数据绑定指令v-model