美文网首页
Vue登陆中V-If的转换使用

Vue登陆中V-If的转换使用

作者: 黑子_f338 | 来源:发表于2018-10-24 11:07 被阅读0次

    V-IF的定义:

    v-if是组件中的一个元素,他是根据条件来执行不同的运行结果

    V-IF的使用:

    小实例:导航栏的变化

    变化条件:根据token是否为空进行导航栏的变化


    image.png
    • 代码作用:调用后台接口,通过localStorage设置缓存对象
    • 代码结果:这样我们就能在页面缓存中存储一个loginUser的对象,
    • 后面作用:可以根据是否存在loginUser对象来显示不同导航栏

    当loginUser存在时

    image.png
    • 代码作用:获取登陆界面设置的loginUser对象,查看其是否存在
    • V-if作用:如果存在的时候,即


      image.png
    • 那么最终效果将是:


      image.png
    • V-if作用: 如果不存在的时候,即


      image.png
    • 那么最终效果将是:


      image.png

    后端接口层Controller代码:


    image.png

    相关文章

      网友评论

          本文标题:Vue登陆中V-If的转换使用

          本文链接:https://www.haomeiwen.com/subject/gzrwzftx.html