基于Vue.js实现标签滑块效果

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

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge ' script src=' http :/lib/vue。量滴js /脚本样式* {边际：0划水：0;} #tabPanel .itemname { height:40px宽度宽度：180像素边距-底部：10 px} #tabPanel .itemcontent { height:40px宽度宽度：180px} #tabPanel .addbtn { width:100px高度：30 px} #tabPanel .活动{ background : # eee } # Tabpanel { height :340 px宽度width :500 pxmargin :100 px auto } # Tabpanel .选项卡{ height:40px背景# cccmargin-top :10 px；} #tabPanel .选项卡ul li{list-style:无；float:left宽度：80 px高度：40 px文本对齐：居中；线高：40 px} #tabPanel .内容{高：300像素宽度宽度：500像素背景技术# eee} /style titleVue.js编写标签滑块效果/title/headbody div id='tabPanel '标签添加滑块名称：输入类型=' text ' v-model=' Tabitem ' class=' item name '/label br标签添加滑块内容：输入类型=' text ' v-model=' TabContent ' class=' item content '/label br输入类型='按钮'值='添加选项@ click=' addItem()' class=' addbtn ' div class=' tab ' ul Li v-for='(值，索引)在tab ' v-bind : class=' { active : index==num } @ mouse over=' toggle(index)' @ dblclick=' del(index)' { { value } }/Li/ul/div class=' content ' div class=' box ' v-for=' tab contents ' v-show=' index=' index='第一项','第二项]，选项卡内容3360['第一项内容','第二项内容]，num: 0，tabItem: ' '，tabContent:'' }，methods:{ //切换滑块toggle:函数(索引){这个。 num=索引；}, //添加滑块addItem:函数(){ if(this。tabitem==' ' | |这个。tabcontent==' '){ alert('填写完整的名称和内容');} else { this。选项卡。推(这个。tabit em)；这个。选项卡内容。推(这个。选项卡内容)；} }, //双击删除滑块del:函数（索引){这个。选项卡。拼接(索引，1);this.tabContents.splice(index，1) }，//编辑选项内容编辑内容：函数（索引，值){这个。选项卡内容[索引]=值；控制台。日志(这个。选项卡内容)；} } });/script/html以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。