v-model使用说明
在Vue框架中，能够绑定表单元素数据的命令有v-bind和v-model，但是v-bind只能单向绑定（将data中的数据绑定到View视图中），而v-model则可以双向绑定（也就是View视图与数据M双向绑定改变）。
但是v-model也有一定的局限性，只能绑定「表单元素」，则v-bind可以绑定「各类元素」。
那么什么是「表单元素」呢？
「表单元素」：input(radio, text, address, email....) 、select、checkbox、textarea等。
下面来写一个双向绑定的示例。
示例
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.inner{
width: 100%;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="app">
<h4>{{ msg }}</h4>
<!-- 使用v-model双向绑定msg数据 -->
<input type="text" v-model="msg" >
</div>
<!-- 1.导入vue.js库 -->
<script src="lib/vue.js"></script>
<script>
// 2. 创建一个Vue的实例
var vm = new Vue({
el: '#app',
data: {
msg: "hello world",
},
methods:{}
})
</script>
</body>
</html>
首先查看vm.msg数据，如下：
修改input中的数据，观察h4渲染的数据会同时修改，如下：
