vue怎么实现tab控件

Question

今天第一天使用vue，只看了官网的资料，有一个这样的需求

<ul v-on:click="selectOne">
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

点击给li赋值一个class为action，但只允许有一个action。

不过我发现ul触发的selectOne方法回调参数的event的currentTarget为null，就不知道怎么继续下去了。

求大神指点思路

Answer 1

event.target

Answer 2

点击li，查看同级的li中是否有class为action的，如果有remove，然后给当前点击的li添加action；没有直接添加

Answer 3

更好的做法是给每一个 tab 命名，然后根据当前的 tab 名用 v-if/v-show/:class 来显示需要的 tab。

<ul>
    <li @click="tab = 'a'" :class="{action: tab === 'a'}"></li>
    <li @click="tab = 'b'" :class="{action: tab === 'b'}"></li>
    <li @click="tab = 'c'" :class="{action: tab === 'c'}"></li>
</ul>

new Vue({
    data() {
        return {tab: 'a'}
    }
})