vue怎么通过if跳出方法_对vue中v-if的常见使用方法详解

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

这里我总结了一下，v-if使用一般有两个场景：

1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素

2- 进行两个视图之间的切换

下面我写了两个例子，是Vue官方的简单实例。

第一个实例实现了 type等于不同值，A，B，C 三个元素的展示情况。

第二个例子实现了，点击按钮实现两个视图的切换。

Vue中v-if的常见使用

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'

}

}

}

})

}

v-if的简单实用

A

B

C

v-if的弹框切换

用户名：

密码：

切换状态

效果图：

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