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>

v-if，里面這個show是個變量，如果是true就是顯示，如果是false就不顯示，這里是移除了dom

 

有if，就有else

<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>

這里v-if,v-else要 緊貼着使用，不然會報錯，v-if顯示，v-else就會隱藏。v-if隱藏，v-else就會顯示

v-else-if

<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>

這里可以根據show的值進行不同的處理，這三個也要緊貼着寫，中間不能被其他所分隔

v-if使用的時候key值的用法

<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>

這個例子，在我們使用的時候，show的值變為true，發現郵箱名已經變成了用戶名，但是input框里面的值卻沒變空，這是因為vuejs有一種嘗試復用dom的機制，如果已經在的dom，會復用之前的dom，但是這並不是我們想要的效果，這個時候就可以給他加一個key值，告訴vuejs，這是唯一的，是不能復用的input

<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>

這個時候，當show變為true的時候，郵箱名變了，后面的input也變了