<ul class="navbar-nav justify-content-end" id="navMenuRight" >
<div v-show="!landing">
<li class="nav-item justify-content-end" >
<a class="nav-link " href="#" data-toggle="modal" data-target="#loginModal">
登陆/注册
</a>
</li>
</div>
<div v-show="landing">
<li class="nav-item justify-content-end" >
<a class="nav-link " href="#" v-on:click="logout">
退出
</a>
</li>
</div>
</ul>
v-if和v-show的区别,如果只在一个dom上操作,还是用v-show,他的原理的设置这个dom的display,对网页性能消耗小,如果在两个dom之间切换,用v-if,他是根据条件来判断是否加载dom。
const navMenuRight = new Vue({
el:"#navMenuRight",
data:{
navListRight:[
{name:"登陆/注册",url:"#", landing:false}
,{name:"退出",url:"#", landing:true}
],
//登陆状态
landing:false
},
methods:{
logout:function(){
//发送请求
this.setLanding(false);
},
checkLoginStatus:function(){
},
setLanding:function(status){
this.landing=status;
}
},
created:function(){
// console.log(getinfor);
this.checkLoginStatus();
}
});