Vue的指令：其实就是单个JavaScript表达式，一般来说是带有v-前缀；都有着对应的官网介绍：https://cn.vuejs.org/v2/guide/forms.html
v-model：数据双向绑定
下面是一个关于数据绑定的小案例：
页面初始时：
在输入框input中加入v-model后，当在输入框中输入内容，其对应绑定的数据也对应的发生改变，下图输入框绑定username为例：
v-model指令的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-model</title>
</head>
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{new Vue({
el:‘#two‘,
data:{
username:"bob",
num:"24",
interest:[‘唱歌‘,‘跳舞‘,‘游泳‘],
user:{
name:‘keli‘,
age:‘13‘
}
}
})
}
</script>
<body>
<div id="two">
用户信息：<input type="text" v-model="username"/><br />
昵称：
{{username}}<br />
编号：
{{num}}<br />
兴趣：{{interest}}<br />
个人信息：
姓名：{{user.name}}
年龄：{{user.age}}
</div>
</body>
</html>
v-model在其他控件上的使用
input中的checkbox类型，初始时将其设置为false，当使用v-model进行绑定后，勾选后，变为true，其效果如下：
实现该效果的核心代码：
vue部分
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{new Vue({
el:‘#two‘,
data:{
checked:false
}
})
}
</script>
HTML：
<div id="two">
<div id="checkbox">
<input type="checkbox" v-model="checked" />{{checked}}
</div>
</div>
当定义一个空的数组在vue中时：
<script> window.onload= () =>{new Vue({ el:‘#two‘, data:{ checked:false, utils:[] } }) } </script>
其初始效果：
勾选不同的浏览器的时候，其浏览器的名称会显示在空的数组中：
html的代码：
<div id="two">
<div id="checkbox">
<input type="checkbox" v-model="checked" />{{checked}}
</div>
<div id="multi-checkbox" >
<input type="checkbox" value="baidu" v-model="utils" />baidu
<input type="checkbox" value="IE" v-model="utils" />IE
<input type="checkbox" value="Lynx" v-model="utils" />Lynx
<br />
选中的浏览器：{{utils}}
</div>
</div>
v-model应用在下拉列表控件
初始效果：
数据的绑定后：
vue:
<script type="text/javascript" src="../js/vue.js" ></script>
<script>
window.onload= () =>{new Vue({
el:‘#two‘,
data:{
selected:""
}
})
}
</script>
html:
<div id="two">
<div id="select">
<select v-model="selected">
<option disabled="disabled" value="">--请选择--</option>
<option> java</option>
<option> html</option>
<option> java web</option>
<option>javascript</option>
</select>
已选择:{{selected}}
</div>
</div>
v-model应用在文本控件：
vue：
<script> window.onload= () =>{new Vue({ el:‘#two‘, data:{ msg:"" } }) } </script>
HTML：
<div id="two">
<div id="textarea">
<textarea v-model="msg" placeholder=" 请输入描述内容.......">
</textarea>
<p>{{msg}}</p>
</div>
</div>
v-model在以上控件上的使用的所有代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>v-model</title> 6 </head> 7 <script type="text/javascript" src="../js/vue.js" ></script> 8 <script> 9 window.onload= () =>{new Vue({ 10 el:‘#two‘, 11 data:{ 12 // checked:false, 13 // utils:[], 14 // selected:"", 15 msg:"" 16 17 18 19 } 20 21 22 23 }) 24 } 25 </script> 26 <body> 27 <div id="two"> 28 <!--<div id="checkbox"> 29 <input type="checkbox" v-model="checked" />{{checked}} 30 31 </div> 32 <div id="multi-checkbox" > 33 <input type="checkbox" value="baidu" v-model="utils" />baidu 34 <input type="checkbox" value="IE" v-model="utils" />IE 35 <input type="checkbox" value="Lynx" v-model="utils" />Lynx 36 <br /> 37 选中的浏览器：{{utils}} 38 39 </div>--> 40 41 <!--<div id="select"> 42 <select v-model="selected"> 43 44 <option disabled="disabled" value="">--请选择--</option> 45 <option> java</option> 46 <option> html</option> 47 <option> java web</option> 48 <option>javascript</option> 49 </select> 50 51 已选择:{{selected}} 52 </div> 53 --> 54 55 <div id="textarea"> 56 57 <textarea v-model="msg" placeholder=" 请输入描述内容......."> 58 59 </textarea> 60 61 <p>{{msg}}</p> 62 </div> 63 64 65 </div> 66 67 68 </body> 69 </html>
原文：https://www.cnblogs.com/jiguiyan/p/10700676.html
