Vバインドクラスの複数のオプション

Question

私は3つの可能な入力変数の1つに応じて、要素に2つのクラスの1つを与えようとしています。 マイvue.jsそれはクラスwordlongwidthを取得する必要があります== Zinnenlijst wordupload.firstchoice.selected場合はコード

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

は、それ以外の場合は、クラスwordshortwidthを取得する必要があり、どのようにこれを行うことができますか？

Answer 1

あなたは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"> 

Answer 2

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

そして、あなたはこのソースをチェックアウト三項式の詳細を学びます