Vue_双向绑定
我们对刚才的案例进行简单修改:
<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操作,这就是双向绑定的魅力。
学习中,博客都是自己学习用的笔记,持续更新改正。。。