vuejs如何添加链接

vuejs添加链接的方法:1、创建html代码“…”;2、通过“navigation:function(){…}”添加链接即可。

vuejs如何添加链接

本文操作环境:Windows7系统、Vue2.9.6、Dell G3电脑。

vuejs如何添加链接?

vue.js添加链接的方法:

js代码为:

立即学习“前端免费学习笔记(深入)”;

  1. navigation:function(){            new Vue({                el: '#navUl',                data: {                    menuData:{                        '个人首页':'personal-home.html',                        '人才分析':'personal-analysis.html',                        '基本信息':'personal-info-base.html',                        '技能态度':'skill-attitude.html',                        '参与项目':'involved-project.html',                        '学习':'learn.html',                        '考勤':'work-attend.html',                        '生活福利':'welfare.html'                    }                },                computed:{                    curIdx:function(){                        var curIdx = 0;                        $.each(this.menuData,function(k,v){                            if(location.pathname.indexOf(v)!=-1){//说明包括(也就是当前页面)                                return false;                            }else{//==-1说明不包括(不是当前页面)                                curIdx++;                            }                        });                        console.log(curIdx);                        return curIdx;                    }                }            });        }

登录后复制

html代码为:

  1.  

登录后复制                    {{ name+’–‘+index }}           

说明:思路是,每一页都对应着一个index值,举例来说:当切换到基本信息页时,index=2,此时如果curIdx也等于2,那么index==curIdx,增加curr类,文字变红,而页面跳转是给文字增加了链接,不是点击事件造成的;

因此切换到个人首页时,curIdx==0;切换到人才分析页时,curIdx==1;切换到基本信息页时,curIdx==2;以此类推;

对于基本信息页:js文件中,循环this.menuData,首先当前链接不包括第一个链接personal-home.html的内容,所以location.pathname.indexOf(v)==-1,此时curIdx由0增加为1;

然后第二次循环,当前链接不包括第二个链接personal-analysis.html的内容,所以location.pathname.indexOf(v)==-1,此时curIdx由1增加为2;

然后第三次循环,当前链接包括第三个链接personal-info-base.html的内容,所以location.pathname.indexOf(v)!=-1,此时return出false,curIdx==2;

也就是说基本信息页的curIdx为2;此时index==curIdx,为当前增加curr类名;

推荐:《vue教程》

以上就是vuejs如何添加链接的详细内容,更多请关注【创想鸟】其它相关文章!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

点点赞赏,手留余香

给TA打赏
共0人
还没有人赞赏,快来当第一个赞赏的人吧!
    编程技术

    Vue3知识地图二:Vue生命周期函数与常用模板语法

    2025-4-5 18:46:35

    编程技术

    vue.js如何实现全选功能

    2025-4-5 18:46:44

    0 条回复 A文章作者 M管理员
    欢迎您,新朋友,感谢参与互动!
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    私信列表
    搜索