2
A
答えて
4
これは、Vueのクラスバインディングのためのobject syntaxです。 expr2
がtruthyの場合、Vueはクラスにexpr1
というクラスを追加します。
:class
は、v-bind:class
のshorthandです。
発現がdiv
にあった場合expr2
がtruthyた場合、例えば、
<div :class="{expr1: expr2}"></div>
そして、レンダリングされた出力は
<div class="expr1"></div>
あろう編集
Truthy値しばしば混乱とJavaScriptのエラーの原因となります。しかし、true
の値があることを確認するために使用できるstrict equality operatorがあります。あなたはexpr2
がtruthyなくtrue
かもしれないケースを避けることができます
:class="{expr1: true === expr2}"
。
2
これは、expr2が真実であるときにノードがクラスexpr1を取得することを意味するクラスバインディングです。
読む:https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax
関連する問題
- 1. Javascriptの算術演算の加算演算子はありますか?
- 2. バイナリ演算子 "<"のオペランドタイプが正しくありません
- 3. JavaScript算術演算子...どこにありますか?
- 4. Pythonに含意論理演算子がありますか?
- 5. C#にXNOR(論理バイコンディション)演算子がありますか?
- 6. n個の演算子の真理値表を生成する
- 7. Javascript論理演算子:?
- 8. 単項演算子をPythonでバイナリ演算子でオーバーライドする可能性はありますか?
- 9. バイナリ演算子のオーバーロード
- 10. テンプレートクラスのバイナリ演算子オーバーロード
- 11. バイナリ演算子 ">"のオペランドタイプが正しくありませんか?
- 12. バイナリ演算子C++オーバーロード
- 13. バイナリ演算子>エラー
- 14. Meteor's Minimongoに$演算子の代わりがありますか?
- 15. IS演算子のアンボックスの値の型はありますか?
- 16. Python 2.7xにJavascriptのようにオブジェクトスプレッド演算子がありますか?
- 17. Regex.Replaceに "or"演算子の理論式のサイズ制限がありますか?
- 18. 演算子の戻り値++
- 19. 論理&&および|| JavaScriptの演算子
- 20. mysqlの 'IN'演算子には値の数に制限がありますか?
- 21. Cのバイナリ演算子の戻り値の型は何ですか?
- 22. FQLに "NOT NULL"型の演算子がありますか?
- 23. Typescriptに演算子のオーバーロードがありますか?
- 24. boost_interfaceに演算子[]または.at()メソッドがありますか?
- 25. ベクトル演算子[]戻り値
- 26. "=="演算子の戻り値が
- 27. ggplotのバイナリ演算子に数値以外の引数
- 28. Shinyのバイナリ演算子に数値以外の引数
- 29. NOR演算子があるプログラムはありますか?
- 30. intに演算子がありますか?
https://vuejs.org/v2/guide/class-and-style.html#Object-Syntaxは、クラスオブジェクトはクラスにバインドされることを述べているので、何かを持っている何の停止はありませんこのように、classObject:{ active:true、 'text-danger':false、model: "500" }真偽値ではない可能性のあるモデル名に注目してください。これを行うきれいな方法については不明です。 – Bootstrap4
あなたは正しいです。間違いを犯して真実の価値をもたらし、あなたが本当に望んでいないクラスに終わる場合があります。しかし、オブジェクトが有効かどうかを確認する関数からオブジェクトを返すことができます。 in、 ':class =" makeClassObject "'ここで 'makeClassObject'はプロパティがクラスで値がブール値のオブジェクトを返す関数です。その関数ではブール値も検証できます。 – Bert
また、[厳密な等価演算子](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness)を使って真の値を持つようにすることもできます: ':class =" {expr1 :true === expr2} "'。 – Bert