本文主要是介绍Vue.js火速上手第二章——Vue双向绑定v-model，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
一、添加input标签，赋予v-model指令
在上节的index.html中添加如下代码
<html><head><title>chapter2</title></head><body> <div id="app"><input type="text" v-model="name"/><span>你的名字是: {{name}}</span><br/><input type="text" v-model="age"/><span>你的年龄是: {{age}}</span><br/><input type="text" v-model="sex"/><span>你的性别是: {{sex}}</span><br/></div><script src="lib/vue.js"></script><script src="js/main.js"></script></body>
</html>
二、修改main.js文件
var app=new Vue({el: '#app',data:{name:'Jack',age: 18,sex: null}}
);三、浏览器中访问index.html
四、在input标签中修改信息
会发现span标签里的内容会同步被修改
五、 v-show及v-if指令
由于sex的初始值是null，在sex的span标签里填上v-show="sex"，会有如下效果，
当input输入sex的值的时候，才显示后面span标签的内容。
v-if="sex"同样的效果
六、v-show及v-if的区别
v-show 这个元素永远存在，但如果为false，不显示
v-if="" 如果元素为false，标签直接从dom中删除
这篇关于Vue.js火速上手第二章——Vue双向绑定v-model的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
