Vue.JS v-bind：スタイル構文が機能しませんか？

私はかなりVueを知っていて、Vバインドのすべてがループのために私を投げています...Vue.JS v-bind：スタイル構文が機能しませんか？

基本的に、私はこの構文を達成しようとしていますが、Vueのv-bindでは、「Tは、インラインCSSスタイルで変数を使用します。

<div class="card" style="background-color: {{school.color}}">

ここで私は自分のドキュメントから続いてきた私のVueの構文は、ですが、それはまだエラーを投げていますし、私はその理由を把握することはできませんか？明らかに、それは何か簡単でなければならない、私はまだVueの複雑さを完全に理解していない！

<div class="card" :style="{ background-color: school.color }">

ご協力いただければ幸いです。

2016-12-01 MatrixClaw

を私はあなたの質問に答えた場合、あなたはそれをマークするために私の答えの横にチェックマークをクリックすることができるように正しい;-) – asemahle

object syntax bindingsの場合、オブジェクトをバインドしています。したがって、鍵は有効でなければならず、valid unquoted keysでない限り引用符で囲む必要があります。ダッシュ-は、引用符で囲まれていないキーでは使用できないため、コンパイルに失敗します。

これらのオプションのいずれかが動作します：

<div class="card" :style="{ 'background-color': school.color }">

または

<div class="card" :style="{ backgroundColor: school.color }">

2016-12-01 18:51:17 asemahle

ハ！それは簡単だった。私はこれを理解しようと夢中になりました。それは単なる引用符です。本当にありがとう！ – MatrixClaw

問題ありません！私のオリジナルの説明は正しくはありませんでした...引用符が必要な理由をよりよく説明するために編集しました。 – asemahle

答えて