vuejs中v-if的深层用法v-else,v-else-if,key

<div id=‘root‘>
　　<div v-if=‘show‘>helle world</div>
　　<button @click=‘handleClick‘>toggle</button>
</div>
<script>
　　new Vue({
　　　　el:‘#root‘,
　　　　data:{
　　　　　　show:true
　　　　},
　　　　methods:{
　　　　　　handleClick:function(){
　　　　　　　　this.show = !this.show;
　　　　　　}
　　　 }
　　})
</script>

<div id=‘root‘>
　　<div v-if=‘show‘>helle world</div>
　　<div v-else>bye world</div>
</div>

<script>
　　var vm = new Vue({
　　　　el:‘#root‘,
　　　　data:{
　　　　　　show:true
　　　　}
　　})
</script>

<div id=‘root‘>
　　<div v-if=‘show==="a"‘>this is a</div>
　　<div v-else-if=‘show==="b"‘>this is b</div>
　　<div v-else>this is others</div>
</div>


<script>
　　var vm = new Vue({
　　　　el:‘#root‘,
　　　　data:{
　　　　　　show:‘a‘
　　　　}
　　})
</script>

<div id=‘root‘>
　　<div v-if=‘show‘>
　　　　用户名：<input type="text" />
　　</div>
　　<div v-else>
　　　　邮箱名：<input type="text" />
　　</div>
</div>


<script>
　　var vm = new Vue({
　　　　el:‘#root‘,
　　　　data:{
　　　　　　show:false
　　　　}
　　})
</script>

<div id=‘root‘>
　　<div v-if=‘show‘>
　　　　用户名：<input type="text" key=‘userName‘/>
　　</div>
　　<div v-else>
　　　　邮箱名：<input type="text" key=‘password‘ />
　　</div>
</div>


<script>
　　var vm = new Vue({
　　　　el:‘#root‘,
　　　　data:{
　　　　　　show:false
　　　　}
　　})
</script>