vue 三目表達式的書寫

三目表達式

語法為:    條件表達式？表達式1:表達式2

它的邏輯是根據前面判斷條件，如果為真，則執行第一個;如果為假，則執行第二個。

<div class="check-part" style="overflow:auto;" >
             <a-checkbox  v-for="(item,index) in list" :key="index" style="display:block; padding:10px" :checked="item.check" @change="onChangeA(item,index)">
                <a-button type="link" style="border:1px #1890ff solid; " :style="{ 'color' : activeId == item.id ? 'black': ''}" @click="changeButton(item)" >
                   {{item.fileName}}
                 </a-button>
             </a-checkbox>
            
            
              <a-button type="primary" @click="add" class="add" >
              <!-- <a-button type="primary" @click="showModal" style="width:80px;top:240px;left:140px"> -->
                 添加目錄
               </a-button>
                <a-modal v-model="visible" title="目錄" ok-text="確認" cancel-text="取消" @ok="hideModal">
                <a-input placeholder="請輸入目錄名" v-model="fileName" />
               </a-modal>
             </div>

其中， <a-button type="link" style="border:1px #1890ff solid; " :style="{ 'color' : activeId == item.id ? 'black': ''}" @click="changeButton(item)" > 用的就是三目表達式，對按鈕的按鈕的顏色進行判斷。

如果，activeId ==item.id 那么按鈕的顏色則為black，否則，則為原來的顏色。

通過三目表達式可以很大程度上減少代碼冗余問題。