Vue中v-model表单绑定几种实现方式
一.单个复选框checkbox
单个复选框对应v-model绑定的数据类型为bool值类型，即选中后v-model绑定的值被修改成true，否则为false，因为只有两种状态，选中和不选中，废话不多说，直接上代码：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewpot" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-model介绍</title>
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
<style>
* {
margin: 0;
padding: 0;
}
[cloak] {
display: none;
}
</style>
</head>
<body>
<div id="shop" v-cloak>
<label for="checkbox">单个复选框</label>
<input type="checkbox" id="checkbox" v-model="checked">
<p>单个复选框：{{checked}}</p>
</div>
<script>
var vm = new Vue({
el:'#shop',
data:{
msg: "我是插值表达式中的值",
ballList: [],
sex: '',
location: '',
checked: ''
},
methods:{
}
})
</script>
</body>
</html>
实现效果如下图
当我们勾选单个复选框时，v-model绑定的复选框中selected的值就修改成true
二.v-model绑定checkbox多复选框
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewpot" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-model介绍</title>
<script src='https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js'></script>
<style>
* {
margin: 0;
padding: 0;
}
[cloak] {
display: none;
}
</style>
</head>
<body>
<div id="shop" v-cloak>
<label for="basketball">篮球</label>
<input type="checkbox" id="basketboll" v-model="ballList" value="1">
<label for="basketball">羽毛球</label>
<input type="checkbox" id="ymq" v-model="ballList" value="2">
<label for="basketball">足球</label>
<input type="checkbox" id="footboll" v-model="ballList" value="3">
<p>ballList: {{ ballList }}</p>
</div>
<script>
var vm = new Vue({
el:'#shop',
data:{
msg: "我是插值表达式中的值",
ballList: [],
sex: '',
location: '',
checked: ''
},
methods:{
}
})
</script>
</body>
</html>
实现效果如下图：
需要值得注意的时当我们表单类型为checkbox且有多个input时，这时v-model绑定某个变量后，每一个input都必须有一个唯一的value值来唯一区分每一个复选框，然后绑定的数据为数组类型，存储的是value中的值
三.radio单选框
<label for="male">男</label>
<input type="radio" id="male" v-model="sex" value="男">
<label for="female">女</label>
<input type="radio" id="female" v-model="sex" value="女">
<p>sex: {{ sex }}</p>
单选框就是二选一，所以有一个唯一value来区分两个input，然后v-model值绑定的数据就是对应选中输入框中value，效果如下：
四. 下拉select框
下拉框分为两种，一种只能选中一个下拉框，另一种可以选中多个下拉框
选一个案例
<select name="" id="" v-model="location">
<option value="" disabled>请选择</option>
<option value="beijibg" default>北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
<p>
slect: {{ location }}
</p>
效果：
绑定多个下拉框案例：
<select name="" id="" v-model="locations" multiple>
<option value="" disabled>请选择</option>
<option value="beijibg" default>北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
<p>
slect: {{ locations }}
</p>
绑定多个下拉在select上添加multiple属性可以，表示可以选中多个，选完一个后按住ctrl再选一个，实现效果如下：
五.v-model补充
修饰符.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >
.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
<input v-model.number="age" type="number">
这通常很有用，因为在 type=“number” 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim="msg"
