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

Posted 2021-01-05 Zina

<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也变了