这篇文章给大家介绍v-if指令怎么在vue中使用，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
v-if使用一般有两个场景：
1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
2- 进行两个视图之间的切换
下面我写了两个例子，是Vue官方的简单实例。
第一个实例实现了 type等于不同值，A，B，C 三个元素的展示情况。
第二个例子实现了，点击按钮实现两个视图的切换。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue中v-if的常见使用</title> <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script> </head> <script> window.onload = function(){ //创建一个vue实例 var app = new Vue({ el: '#app', data: { type:'C', loginType:'username' }, methods:{ changeloginType(){ let self = this; if(self.loginType=='username'){ self.loginType = '' }else{ self.loginType = 'username' } } } }) } </script> <body> <div id="app"> <div >v-if的简单实用</div> <template> <div v-if="type == 'A'"> A </div> <div v-else-if="type=='B'"> B </div> <div v-else> C </div> </template> <div >v-if的弹框切换</div> <template v-if="loginType === 'username'"> <label>用户名：</label> <input placeholder="Enter your username" key="username-input"> </template> <template v-else> <label>密码：</label> <input placeholder="Enter your email address" key="email-input"> </template> <button @click="changeloginType">切换状态</button> </div> </body> </html>
关于v-if指令怎么在vue中使用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
