vue中经常使用到<input>和<textarea>这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。
v-model本质上是一个语法糖。如下代码
<input v-model="test">
本质上是
<input :value="test" @input="test = $event.target.value">
其中@input是对<input>输入事件的一个监听:value="test"是将监听事件中的数据放入到input，下面代码是v-model的一个简单的例子。在这边需要强调一点，v-model不仅可以给input赋值还可以获取input中的数据，而且数据的获取是实时的，因为语法糖中是用@input对输入框进行监听的。可以在如下div中加入<p>{{ test}}</p>获取input数据，然后去修改input中数据会发现<p></p>中数据随之改变。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<form action="" method="post">
用户名：<input type="text" name="username" v-model="user.username">
密码：<input type="text" name="password" v-model="user.password">
</form>
</div>
</body>
<script>
//view model
new Vue({
el:"#app",
data:{
user:{
username:"test",
password:"1234"
}
}
});
</script>
</html>
image.png
v-model在input的下拉框、单选按钮、复选框中的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--下拉框-->
<div id="app">
<select v-model="selected">
<option value="A被选">A</option>
<option value="B被选">B</option>
<option value="C被选">C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
});
</script>
</body>
</html>
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--单选按钮-->
<div id="app">
<input type="radio" id="small" value="small_value" v-model="picked">
<label for="small">small</label>
<input type="radio" id="big" value="big_value" v-model="picked">
<label for="big">big</label>
<span>Picked: {{ picked }}</span>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
picked: ''
}
})
</script>
</body>
</html>
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>v-model的使用</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--复选框-->
<div id="app">
<input type="checkbox" id="one" value="value_one" v-model.lazy="checkedNames">
<label for="one">选项一</label>
<input type="checkbox" id="two" value="value_two" v-model.lazy="checkedNames">
<label for="two">选项二</label>
<input type="checkbox" id="three" value="value_three" v-model.lazy="checkedNames">
<label for="three">选项三</label>
<span>Checked names: {{ checkedNames }}</span>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
checkedNames: []
}
})
</script>
</body>
</html>
image.png
网友评论