v-model 指令在表单控件元素上创建双向数据绑定,所谓双向绑定，指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致，两者无论谁被改变，另一方也会相应的更新为相同的数据
最基础的就是实现一个联动的效果
<body>
<div class="app">
<span>Multiline message is:</span>
<p>{{message}}</p>
<br>
<textarea name="" v-model="message" placeholder="please write..."></textarea>
</div>
</body>
<script>
new Vue({
el:'.app'
})
</script>
checkbox
<body>
<div class="app">
<input type="checkbox" id="jack" value="jack" v-model="checkedNames">
<label for="jack">jack</label>
<input type="checkbox" id="John" value="John" v-model="checkedNames">
<label for="jack">John</label>
<input type="checkbox" id="Mike" value="Mike" v-model="checkedNames">
<label for="jack">Mike</label>
<br>
<span>Checked names:{{checkedNames}}</span>
</div>
</body>
<script>
new Vue({
el:'.app',
data:{
checkedNames:[]
}
})
</script>
v-bind
有些指令可以在其名称后面带一个“参数” (Argument)，中间放一个冒号隔开。例如，v-bind 指令用于响应地更新 HTML 特性
结语
感谢您的观看，如有不足之处，欢迎批评指正。
本次给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。
对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。
最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。
网友评论