未分类

使用vue.js写一个tab选项卡效果_vue.js_脚本之家

18 3月 , 2020  

   {{tab.type}}   

平日我们写tab选项卡的时候,日常都以用jq等去操作dom,给同级成分移除active类,然后,给被点击成分增加active类,但是在vue.js中,我们能不去操作dom大家就尽恐怕不操作dom,那么该怎么落到实处呢?

假诺运用过vue-router,那么您会意识,vue-router在应用的时候其实就也就是叁个tab选项卡,在点击之后,被点击的router-link成分会暗中认可被增添上二个router-link-active的类,大家只须要设置这几个类的体裁就可以.(当然,router-link-active卡塔尔是vue-router暗中同意的类名,你能够团结安顿更正名称.这样我们得以一贯使用vue的路由功效当tab选项卡使用了.那么只要不想用路由功用吗?

以上正是本文的全体内容,希望对大家的就学抱有利于,也期望我们多多点拨脚本之家。

css

.active{ color:red}

js部分

简易的vue.js tab 选项卡

html部分

然后大家只须要安装三个.active的体裁就足以了,举个例子设置八个最简便的

Vue.component('child1', { template: "this is child1"})Vue.component('child2', { template: "this is child2"})new Vue({ el: "#app", data: { active: 0, currentView: 'child1', tabs: [ { type: 'tab1', view: 'child1' }, { type: 'tab2', view: 'child2' } ] }, methods: { toggle{ this.active = i this.currentView = v } }})

规律超轻松,大家给tab选项绑定了toggle方法,点击时让active等于其index,进而给其加多了一个active类,而显得的内容也是一模二样的原理.比起守旧操作dom方法,这几个全部看起来越来越精短,不过麻烦在每一个tab选项卡都以二个组件.


相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图