V-bind類的多個選項

我想根據三個可能的輸入變量之一給兩個類中的一個元素。我vue.js代碼V-bind類的多個選項

<input type='text' class='inputwordtext' v-bind:class="[{(wordupload.firstchoice.selected == 'Zinnenlijst') : wordlongwidth}, {(wordupload.firstchoice.selected != 'Zinnenlijst') : wordshortwidth}]">

如果wordupload.firstchoice.selected == Zinnenlijst它應該得到的類wordlongwidth，否則它應該得到的類wordshortwidth，這可怎麼辦呢？

來源

2017-10-09 JFugger_jr

你可以用單列直插式使用tenary運營商做到這一點：

<input 
    type='text' 
    class='inputwordtext' 
    :class="wordupload.firstchoice.selected === 'Zinnenlijst' ? 'wordlongwidth' : 'wordshortwidth'" 
>

但是，這將是更具可讀性，使之成爲計算性能：

computed: { 
    inputClass() { 
    let selected = this.wordupload.firstchoice.selected; 
    return (selected === 'Zinnenlijst') ? 'wordlongwidth' : 'wordshortwidth'; 
    } 
}

而且那麼請參考模板中的計算屬性：

<input type='text' class='inputwordtext' :class="inputClass">

來源

2017-10-09 17:23:20 thanksd

的vue.js文檔建議使用三元的表達，並結合v-bind:class和你經常class像這樣：

<input type='text' :class="[wordupload.firstchoice.selected === 'Zinnenlijst' ? 'wordlongwidth' : 'wordshortwidth', 'inputwordtext']">

要看到他們談論這一點，並瞭解更多關於類結合檢查他們的文檔：

https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

你瞭解三元表達式看看這個來源：

https://www.w3schools.com/js/js_comparisons.asp

來源

2017-10-09 17:46:55

V-bind類的多個選項

回答

相關問題