Vue学习笔记（八、v-model双向绑定）
与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>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]