用v-if实现导航栏登录和未登录状态的不同显示

我们日常浏览网站的时候，很多内容都需要登录后才可以查看，那么，我们如何动态控制控件的出现呢？那么今天就结合这一点来讲讲v-if的使用

• 首先我们来看一下登录和未登录状态下导航栏的变化

1 、登录状态

image.png

2 、未登录状态

image.png

那么，我们如何实现这个效果呢？
我们用判断token是否为空的方式来判定是否有用户登录，主要是根据是否存在loginUser对象来显示不同导航栏

image.png

如果LoginUser存在

image.png

即user !=null时显示信息

image.png

需要注意的是：我们此处并不是根据v-if设置控件的显隐，v-if的判定是如果不满足要求直接补构建此控件

如果LoginUser不存在

即user==null时

image.png

例子很简单，但是希望能对你有所帮助~