对vue中v-if的常见使用方法详解       今天小编就为大家分享一篇对vue中v-if的常见使用方法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

使用过Vue的小伙伴一定使用过v-if 这个属性，但是这个属性主要是来干什么的呢,他得用途是那些？

这里我总结了一下，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="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'" 
 /div 
 div v-else-if="type=='B'" 
 /div 
 div v-else 
 /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 

效果图：

以上这篇对vue中v-if的常见使用方法详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持凡科。