v-if
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<div v-if="show">{{message}}</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show:false,
message:"wangshunie"
}
})
</script>
</body>
<div id="app">
<div v-if="show">{{message}}</div><!--//无论是v-if还是v-show刚开始的展现取决于show这个变量的ture or flase-->
<div v-show="show">{{message}}</div>
<!--v-show已经被渲染到页面但是没有展现出来 ，只不过加了一个属性display:none-->
</div>
<div v-if="show">{{message}}</div>
<div v-else>buy</div>
<!--v-if v-else要紧挨着使用-->
v-if v-else-if else
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<div v-if="show === 'a'">This is a</div><!--//无论是v-if还是v-show刚开始的展现取决于show这个变量的ture or flase-->
<div v-else-if="show === 'b'">This is b</div>
<div v-else>this is c</div>
<!--v-if v-else要紧挨着使用-->
<!--<div v-show="show">{{message}}</div>-->
<!--v-show已经被渲染到页面但是没有展现出来 ，只不过加了一个属性display:none-->
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show:"a",
message:"wangshunie"
}
})
</script>
</body>
</html>
input 输入框
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
<script src="js/vue.js" ></script>
</head>
<body>
<div id="app">
<div v-if="show">
用户名：<input/>
</div>
<div v-else>
邮箱名：<input/>
</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data:{
show:false,
message:"wangshunie"
}
})
</script>
</body>
</html>
如果给input框加入key关键字 就会不仅更新用户名还会更新input框里的内容
<div v-if="show">
用户名：<input key="g"/>
</div>
<div v-else>
邮箱名：<input key="f"/>
</div>
