v-model的使用
目录

一、v-model 的原理

二、v-model 结合radio 使用

三、v-model 结合checkbox 类型单选使用

四、v-model 结合checkbox 多选使用

五、v-model 结合select 使用

六、v-model 的修饰符的使用

一、v-model 的原理

v-model指令用来实现表单元素和数据的双向绑定，等价于v-bind和v-on共同作用监听绑定数据；v-bind绑定value属性的值；v-on绑定input事件监听到函数中，函数会获取最新的值赋值到绑定的属性中

v-model="msg"/>

{{msg}}

v-model双向绑定，既输入框的value改变，对应的message对象值也会改变，修改message的值，input的value也会随之改变。无论改变那个值，另外一个值都会变化。

同理于：

@input="changeValue" :value="msg"/>

{{msg}}

v-model = v-bind + v-on，实现双向绑定需要是用v-bind和v-on，使用v-bind给input的value绑定message对象，此时message对象改变，input的值也会改变。但是改变input的value并不会改变message的值，此时需要一个v-on绑定一个方法，监听事件，当input的值改变的时候，将最新的值赋值给message对象。$event获取事件对象，target获取监听的对象dom，value获取最新的值。

实现效果：

二、v-model 结合radio 使用

radio单选框的name属性是互斥的，如果使用v-model，可以不使用name就可以互斥。

使用name 属性时，属性值要一样，因为系统判定要选的是男还是女，是互斥的结果，如果属性值不一样，则选框男女都可以选。

男

女

男

女

你选择的性别是：{{sex}}

v-model绑定`sex`属性，初始值为“男”，选择女后`sex`属性变成“女”，因为此时是双向绑定。

三、v-model 结合checkbox 类型单选使用

checkbox可以结合v-model做单选框，也可以多选框。这里做单选用时：

用一个动态的值来控制其状态
```
DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<label for="agree">
				<input type="checkbox" id="agree" v-model="isAgree">同意协议
			label>
			<div style="margin:20px 0 0 0;">
				<button type="button" :disabled="!isAgree">下一步button>
			div>
		div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
                        isAgree:false
					}
				},
				watch:{
					/* isAgree(n,o){
						console.log(n);
						console.log(o);
					} */ //监听 isAgree 值的变化，但监听不到第一次的值
 
					isAgree:{
						handler(n,o){
							console.log(n);
							console.log(o);
						},
						immediate:true  //立即监听isAgree的值，从第一次的值开始
					}
				}
 
			})
		script>
	body>
html>
```
四、v-model 结合checkbox 多选使用
```
DOCTYPE html>
  
  Title
  
  多选框
  
    篮球
    足球
    羽毛球
    乒乓球
  你的爱好是：{{hobbies}}
```

还可以：

值的绑定：

原理：遍历数组的值，动态的监听绑定数组的值放置空数组里（v-model选定的值，每点一次会有一个value值，把value响应的值给v-model绑定的值—响应式原理可以解释）


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<label :for="item" v-for="(item,index) in hhobbies" :key="index">
				<input type="checkbox" :id="item" :value="item" v-model="hobbies">{{item}}
			label>
			
			您的选择是:<h2>{{hobbies}}h2>
		div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						hobbies: [],
						hhobbies: ["篮球", "足球", "乒乓球", "羽毛球"]
					}
				}
 
			})
		script>
	body>
html>

checkbox结合v-model实现单选框，定义变量isAgree初始化为false，点击checkbox的值为true，isAgree也是true。
checkbox结合v-model实现多选框，定义数组对象hobbies，用于存放爱好，将hobbies与checkbox对象双向绑定，此时选中，一个多选框，就多一个true，hobbies就添加一个对象。

五、v-model 结合select 使用


DOCTYPE html>
 
<html>
 
    <head>
 
        <meta charset="utf-8" />
 
        <title>title>
 
        <script src="../vue.js" type="text/javascript" charset="utf-8">script>
 
    head>
 
    <body>
 
        <div id="app">
            <select name="fruit" v-model="fruit">
                <option value="苹果">苹果option>
                <option value="香蕉">香蕉option>
                <option value="西瓜">西瓜option>
            select>
            您的选择是：{{fruit}}
        div>
        <script>
            const vm = new Vue({
                el: '#app',
                data() {
                    return {
                        fruit:'苹果'
                    }
                }
            })
        script>
    body>
html>

用v-on 和v-bind 来写：


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script src="../vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
			<select name="fruit" :value="fruit" @input="change">
				<option value="苹果">苹果option>
				<option value="香蕉">香蕉option>
				<option value="西瓜">西瓜option>
			select>
			您的选择是：{{fruit}}
		div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
                        fruit:'苹果',
					}
				},
				methods:{
					change(e){
						console.log(e);
						this.fruit = e.target.value
					}
				}
 
			})
		script>
	body>
html>

v-model结合select可以单选也可以多选。

六、v-model 的修饰符的使用


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script src="../vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
        <div id="app">
            <input type="text" v-model="message" />
            <h2>{{message}}h2>
 
            <input type="text" v-model="age" />
            <h2>{{age}}---{{typeof age}}h2>
 
            <input type="text" v-model="name" />
            <h2>{{name}}h2>
        div>
        <script>
            const vm = new Vue({
                el: '#app',
                data() {
                    return {
                        message: "zzz",
                        age: 18,
                        name: "ttt"
                    }
                }
            })
      script>
	body>
html>

lazy：默认情况下是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据。
number：默认是string类型，使用number复制为number类型。
trim：用于自动过滤用户输入的首尾空白字符


DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>title>
		<script src="../vue.js" type="text/javascript" charset="utf-8">script>
	head>
	<body>
		<div id="app">
              <input type="text" v-model.lazy="message" />
			  <h2>{{message}}h2>
 
			  <input type="text" v-model.number="age" />
			  <h2>{{age}}---{{typeof age}}h2>
 
			  <input type="text" v-model.trim="name" />
			  <h2>{{name}}h2>
		div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						message: "zzz",
						age: 18,
						name: "ttt"
					}
				}
			})
		script>
	body>
html>

从以上两幅图可以看出v-model 修饰符的作用。

v-model的使用

一、v-model 的原理

{{msg}}

{{msg}}

二、v-model 结合radio 使用

三、v-model 结合checkbox 类型单选使用

四、v-model 结合checkbox 多选使用

多选框

你的爱好是：{{hobbies}}

五、v-model 结合select 使用

六、v-model 的修饰符的使用