最終更新:2018-03-26 (月) 12:41:02 (2225d)
v-bind
Top / v-bind
1つ以上の属性またはコンポーネントのプロパティと式を動的に束縛します。
https://jp.vuejs.org/v2/guide/class-and-style.html
https://jp.vuejs.org/v2/api/#v-bind
<!-- 属性を束縛 --> <img v-bind:src="imageSrc"> <!-- 省略記法 --> <img :src="imageSrc"> <!-- インライン文字列連結 --> <img :src="'/path/to/images/' + fileName"> <!-- クラスバインディング --> <div :class="{ red: isRed }"></div> <div :class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- スタイルバインディング --> <div :style="{ fontSize: size + 'px' }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 属性のオブジェクトのバインディング --> <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- prop 修飾子による DOM 属性バインディング --> <div v-bind:text-content.prop="text"></div> <!-- prop バインディング。"prop" は my-component 内で宣言される必要があります --> <my-component :prop="someThing"></my-component> <!-- 親のプロパティの子コンポーネントに渡す ---> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>
省略記法
<!-- 完全な構文 --> <a v-bind:href="url"> ... </a> <!-- 省略記法 --> <a :href="url"> ... </a>
CSS
- <div v-bind:class="classObject"></div>
- <div v-bind:style="styleObject"></div>