为了在Vue中实现tab功能,我写了如下代码。
<span :class="{activeName:active=='week'}" @click="selectTime('week')">本周</span>
<span :class="{activeName:active=='month'}" @click="selectTime('month')">本月</span>
<span :class="{activeName:active=='year'}" @click="selectTime('year')">全年</span>
css代码为:
.activeName{
color: #1989FA;
}
其中用到了Vue的条件渲染,通过class绑定。即是判断this.active的当前值,从而给对应的tab加上颜色。
Vue的条件渲染的方式还有通过三元表达式
<div :style="{ 'height': align=='center' ? 'auto' : '' }"></div>
或通过计算属性
<div :align="align" :style="getLocality"></div>
computed: {
getLocality() {
if(this.align === "center") {
return "height: auto"
}
}
},
来实现。