Vue条件渲染方式的使用

为了在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"
      }
    }
},

来实现。