Vue.jsでは、属性の値を自由に入れ込むことができます。
では「v-bind」を使って目的の属性に値を入れてみましょう！
今回は、imgタグの属性を操作してみようと思います。
スクリプト（Vue.js タグの属性値を操作してみよう！（v-bind））
|
1 2 3 4 5 6 7 8 |
var app2 = new Vue({ el: '#app-2', data : { path: "https://goo.gl/FoT2Jq", alt: "前カゴに入っているねこ", width: 400 } }) |
dataオブジェクトに3つの変数を作ります。
後はこれをimgタグの属性に入れ込んでやりましょう。
入れ込みに使うのが「v-bind」ですね。
HTML（Vue.js タグの属性値を操作してみよう！（v-bind））
|
1 2 3 |
<div id="app-2"> <img v-bind:src="path" v-bind:alt="alt" v-bind:width="width"> </div> |
スクリプト側で作った変数を各属性に「v-bind」を使って入れてやります。
「v-bind:属性=”dataオブジェクト内の変数”」でOKです。
これで以下のようなタグに置き換わることになります。
|
1 |
<img src="https://goo.gl/FoT2Jq" alt="前カゴに入っているねこ" width="400"> |
ちょっと面白くなってきましたね！
サンプルも作ってます。
See the Pen Vue.js タグの属性値に直接値を入れるサンプル（v-bind） by clue-design (@clue-design) on CodePen.0
コード変更や、大きな画面でみたい場合はこちらから。
[…] v-bindが良くわからないという方ははこちらです。 […]