<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也变了
vuejs中v-if的深层用法v-else,v-else-if,key
原文地址：https://www.cnblogs.com/wzndkj/p/9625386.html