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:"",
interest:['唱歌','跳舞','游泳'],
user:{
name:'keli',
age:''
}
} })
}
</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在以上控件上的使用的所有代码：
<!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:{
// checked:false,
// utils:[],
// selected:"",
msg:"" } })
}
</script>
<body>
<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 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 id="textarea"> <textarea v-model="msg" placeholder=" 请输入描述内容......."> </textarea> <p>{{msg}}</p>
</div> </div> </body>
</html>
v-model在不同控件上的使用.html