bootstrap vue.js实现标签效果

本文实例为大家分享了引导vue.js实现标签效果的具体代码，供大家参考，具体内容如下

项目目录结构

学生。射流研究…代码

函数学生(){这个。baseinfo={ tabStatus : true，name : '张三，性别： '男性}，这个。parentsinfo={ TabStatus : false，父名： '张全蛋，母亲姓名： '李铁柱}，这个。学习情况={ tabStatus : false，classSort : 1，gradeSort : 2 }}CommonUtil.js代码

Array.prototype.del=函数(筛选器){ var idx=筛选器；if(滤波器类型==' function '){ for(var I=0；长度；i ){ if(filter(this[i]，I))idx=I；} } this.splice(idx，1)}var ary=[{id:1，name:'b'}，{id:2，name : ' b ' }]；var delid=2；阿里。del(function(obj){ return obj。id==delid})html页

！DOCTYPE htmlhtmlhead元字符集='UTF-8 '元名称='视口'内容='宽度=设备宽度，初始比例=1,最大比例=1, 用户可伸缩=否'标题学生管理/标题链接rel='样式表type=' text/CSS ' href=' https://cdn。bootscs。com/bootstrap/3。3 .5/CSS/bootstrap。量滴CSS ' rel='外部无跟随'脚本src=' http :https://cdn。bootscs。com/jquery/3。1 .1/jquery。js /脚本http:https://unpkg.com基本信息/a/Li href=' # ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'家长信息/a/Li href=' # ' rel='外部不跟随' rel='外部不跟随' rel='外部不跟随'成绩查询/a/Li/ul div class=' tab-content ' div class=' tab-窗格淡入活动table class=' table ' tr TD class=' col-LG-2 '姓名/TD TD class=' col-LG-4 ' { BaseInfo。名称} }/TD TD class=' col-LG-2 '性别/TD TD class=' col-LG-4 ' { BaseInfo。性别} }/TD/tr/table/div class='选项卡窗格淡入table class=' table ' tr TD class=' col-LG-2 '父亲名TD/TD类=' col-LG-4 ' { parentsinfo。父辈名称}}/td td class='col-lg-2 '母亲名/TD TD class=' col-LG-4 ' { parent sinfo。母亲节} }/TD/tr/table/div class='选项卡窗格淡入table class=' table ' tr TD class=' col-LG-2 '全班排名/TD TD class=' col-LG-4 ' {研究情况。class sort } }/TD TD class=' col-LG-2 '全级排名/TD TD class=' col-LG-4 ' {研究情况。年级排序} }/TD/tr/table/div/div/body脚本src=' http : js/Student。js '/script脚本var Student=new Student()；新Vue({ el : '#stu '，数据： { baseInfo :学生。baseInfo，parentsInfo :学生。父母信息，学习情境：学生。研究情境},方法： { })/脚本/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。