与v-bind只能实现单向绑定不同,v-model可以实现数据的双向绑定,不过v-model只能用于表单元素中,例如:input(radio,text,address,email...) 、select、checkbox、textarea。
下面代码是一个v-model双向绑定的演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VueBaseCode</title>
<script src="./lib/vue.js"></script>
<style>
.inner {
width: 150px;
height: 168px;
background-color: darkblue;
}
.outer {
height: 256px;
background-color: darkgreen;
}
</style>
</head>
<body>
<div id="app" >
<h3>{
{msg}}</h3>
<input type="text" v-model:value="msg" style="width:100%"><!--双向数据绑定-->
<h3>{
{msg2}}</h3>
<input type="text" v-model="msg2" style="width:100%"><!--双向数据绑定的简写-->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:"好好学习,天天向上。",
msg2:"为中华之崛起而读书!"
},
methods: {
}
});
</script>
</body>
</html>