Vue.jsでHTMLの属性にオブジェクトや変数の値を割り当てる際に、v-bind
というものを使います。
<div v-bind:class="{red: isWarn}">警告なら赤い</div>
これは isWarn
という変数が 真の場合にこのタグのclass属性にred
が追加される例です。
この v-bind:class
にある :
がXMLとしてはNGらしく、テンプレートをXMLで記述するフレームワークで困りました。
解決策は、v-bind
属性にもう一段深いオブジェクトを指定するとのこと。
上の例は下の例と同じ意味になります。これなら :
を使わないので大丈夫。
<div v-bind="{class: {red: isWarn}}">警告なら赤い</div>
参考: Vue.js#v-bind の Exampleのところ