要做一个类似tab效果的页面,点击按钮对应的组件显示,按钮添加、移除类
直接上代码
<template>
<div class="contain">
<div class="comparison_content">
<router-view></router-view>
</div>
<ul class="tab_box">
<li v-for="(todo,index) in todos"
class="tab"
v-on:click="addClass(index)"
v-bind:class="{ current:index==current}">
<router-link :to="{ path: todo.path }"
class="tab_text">{
{todo.text}}</router-link>
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
current: 0,
todos: [
{ path: 'first', text: '第一季度' },
{ path: 'second', text: '第二季度' },
{ path: 'third', text: '第三季度' },
{ path: 'fourth', text: '第四季度' },
{ path: 'annual', text: '全年度' },
]
}
},
methods: {
addClass: function (index) {
this.current = index;
}
}
}
</script>
注:新手学vue中,写页面发现了个问题,路由跳转的页面的地址,如果加'/'的话,地址从根地址开始,不加的话才是从当前地址跳转。