一、添加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中删除
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
