vue tab切换样式

Question

我想实现的效果是打开页面 第三个div有默认class tabActive,所以我设置了tab默认为'all'，
但是打开页面三个div都没有样式，只有点击以后才有，这是为什么？
刚进页面如图

点击所有标签后如图

下面是关键代码

设置tab默认值为all

  data() {
    return {
      tab: "all", //页卡切换
    };
  },

三个div

<div @click="tabShow(mustRead)" :class="{tabActive:tab =='mustRead'}">必读</div>
<div @click="tabShow(summary)" :class="{tabActive:tab =='summary'}">摘要</div>
<div @click="tabShow(all)" :class="{tabActive:tab =='all'}">所有</div>

点击改变tab值

tabShow(t) {
this.tab = t;
}

Answer 1

可以写三元表达式

<div @click="tabShow(all)" :class="[tab =='all'? 'tabActive' : '']">所有</div>