因为 v-if 是一个指令，所以必须将它添加到一个元素上。
在 <template> 元素上使用 v-if 条件渲染分组， <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-if 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <button v-on:click="open">开始</button>{{number}} <div v-if="number > 90">特等奖</div> <div v-else-if="number > 80">一等奖</div> <div v-else-if="number > 70">二等奖</div> <div v-else-if="number > 60">三等奖</div> <div v-else-if="number > 50">再来一次</div> <div v-else>谢谢参与</div> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { number: 0 }, methods: { open: function() { this.number = Math.random() * 100 } } }) </script>
用 key 管理可复用的元素，因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>v-if 指令</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> <template> <div v-if="loginType === 'username'"> <label>username</label> <input type="text" placeholder="enter your username"> </div> <div v-else> <label>passworld</label> <input type="password" placeholder="enter your password"> </div> </template> <template> <div v-if="loginType === 'username'"> <label>username</label> <input type="text" placeholder="enter your username" key="a"> <!--vue是高效复用的，input还是2个input，当时输入缓存还在,为了区别开，用关键字key--> </div> <div v-else> <label>passworld</label> <input type="password" placeholder="enter your password" key="b"> <!--key 在浏览器控制台不显示哦，但能完美解决问题--> </div> </template> <button v-on:click="fun">点击切换</button> </div> </body> </html> <script> var app = new Vue({ el: "#app", data: { loginType: 'username', }, methods: { fun: function() { this.loginType == 'username' ? this.loginType = 'password' : this.loginType = 'username'; } } }) </script>
所以 Vue 为你提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key attribute 即可，每次切换时，输入框都将被重新渲染，达到清除缓存的目的。