技術標籤：Vuevuehtml

需求如下：
根據返回值的狀態（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=“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>

這下放心使用，絕對沒有問題，已經反覆測試過。

好了，就醬。