我们对刚才的案例进行简单修改：
<body>
<div id="app">
<input type="text" v-model="num">
<h2>
{{name}}，非常帅！！！有{{num}}位女神为他着迷。
</h2>
</div>
</body>
<script src="node_modules/vue/dist/vue.js" ></script>
<script>
// 创建vue实例
var app = new Vue({
el: "#app", // el即element，该vue实例要渲染的页面元素
data: { // 渲染页面需要的数据
name: "峰哥",
num: 5
}
});
</script>
-
-
在页面中有一个
input元素，通过v-model与num进行绑定。 -
同时通过
{{num}}在页面输出
效果：
我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。
-
input与num绑定，input的value值变化，影响到了data中的num值
-
页面
{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。
没有任何dom操作，这就是双向绑定的魅力。