Vue框架编写页面,使用v-if判断是否登录

Vue框架编写页面,使用v-if判断是否登录

  • 现在script中的data记入一个user,并得到user的数据


    Vue框架编写页面,使用v-if判断是否登录_第1张图片
  • 如果获得的user不为空时,已为登录状态


    Vue框架编写页面,使用v-if判断是否登录_第2张图片
    image.png

页面效果

Vue框架编写页面,使用v-if判断是否登录_第3张图片
image.png
  • 当user为null时,为没有登录状态


    Vue框架编写页面,使用v-if判断是否登录_第4张图片
    image.png

页面效果

Vue框架编写页面,使用v-if判断是否登录_第5张图片
image.png

使用v-if判断状态,从而根据不同的登录状态,出现不同的页面效果

你可能感兴趣的:(Vue框架编写页面,使用v-if判断是否登录)