vue根据返回数据状态给按钮动态设置disabled属性

需求如下：
根据返回值的状态（status的值），如果值为0/1/2可以使用打卡按钮，status的值为其他的则禁用。
原按钮为：

<el-button type="primary" size="mini">打卡</el-button>

根据状态渲染：
第一种方法，采用v-if,v-else：

<el-button 
     v-if="vo.status===0 || vo.status===1 || vo.status===2"
     type="primary" 
     size="mini" 
     @click="handMember(vo.id,'signin')">打卡
</el-button>
<el-button v-else disabled type="primary" size="mini">打卡</el-button>

这个方法是写了两个按钮，只是根据值判断显示哪个按钮，代码看着不优雅。

第二种方法，直接一个按钮搞定，用三元表达式给disabled添加false或true值：

<el-button
    disabled="vo.status!==0 || vo.status!==1 || vo.status!==2 ? false : true"
    type="primary" 
    size="mini" 
    @click="handMember(vo.id,'signin')">打卡
</el-button>

提醒：上面这个方法做完后经过检查，有报错。大概意思是disabled接受的属性是一个布尔值，但是这个布尔值是不能直接在标签内改的。

草率了，没仔细检查，博文都发出去了才发现这个问题，

经过反复调试，发现 :disabled=“true” 这样设置是有效的，还是上面的思路，只是把disabled属性绑定在一个变量上。
这样好办，改为下面这样：

<el-button
    :disabled="vo.status===0 || vo.status===1 || vo.status===2 ? false : true"
    type="primary" 
    size="mini" 
    @click="handMember(vo.id,'signin')">打卡
</el-button>

简写形式为：

<el-button
      :disabled="!(vo.status===0 || vo.status===1 || vo.status===2)"
      type="primary" 
      size="mini" 
      @click="handMember(vo.id,'signin')">打卡
</el-button>

这下放心使用，绝对没有问题，已经反复测试过。

好了，就酱。