- Ruby / Rails以外の開発一般
READ MORE
これも双方向データバインディングの応用例です。以下のように両方の<input>
フィールドでv-model="a"
を使い、同じ変数を割り当てているだけです(読みやすさのため余分な行や属性を取り除いてあります)。
<input type="text" v-model="a" />
<input type="color" v-model="a" />
Vue.jsのコードもあきれるほど簡単なままです。
new Vue({
el: "#app",
data: {a: "#6B8CFF"},
})
なおカラーピッカーは、Vue.jsではなく、HTML5の機能であるtype='color'
を使っています。
注意: 現時点のSafariはHTML5のカラーピッカー表示用属性type='color'
に対応していません。iOSも含めて色指定機能を付けるには次回のサンプルコード(10)をご覧ください。
:src
前回、:style
と:class
には魔法が効くと書きました。v-bindのうち、:src
にも別のささやかな魔法があります。例はいずれも省略記法で書いています。
<!-- 属性を指定 -->
<img :src="imageSrc">
<!-- インラインでの文字列連結もできる -->
<img :src="'/path/to/images/' + fileName">
:src
では一重の{ }
を使わずにすっきり書けるところがささやかな魔法です。