クルーデザイン

Webの勉強をしよう!Web制作の技術やサービス情報を発信します。

Vue.js

Vue.js タグの属性値を操作してみよう!サンプル(v-bind)

投稿日:

Vue.jsでは、属性の値を自由に入れ込むことができます。
では「v-bind」を使って目的の属性に値を入れてみましょう!
今回は、imgタグの属性を操作してみようと思います。

スクリプト(Vue.js タグの属性値を操作してみよう!(v-bind))

 

dataオブジェクトに3つの変数を作ります。
後はこれをimgタグの属性に入れ込んでやりましょう。
入れ込みに使うのが「v-bind」ですね。

 

HTML(Vue.js タグの属性値を操作してみよう!(v-bind))

スクリプト側で作った変数を各属性に「v-bind」を使って入れてやります。
「v-bind:属性=”dataオブジェクト内の変数”」でOKです。
これで以下のようなタグに置き換わることになります。

ちょっと面白くなってきましたね!
サンプルも作ってます。

See the Pen Vue.js タグの属性値に直接値を入れるサンプル(v-bind) by clue-design (@clue-design) on CodePen.0

コード変更や、大きな画面でみたい場合はこちらから。

 

-Vue.js

執筆者:

関連記事

Vue.js クリックで関数を実行させるサンプル(v-on、methods)

Vue.jsのタグに対するイベントは「v-on」を使います。 今回は、ボタンがクリックされた時に関数を実行してみましょう! スクリプト(Vue.js クリックで関数を実行させるサンプル(v-on、me …

Vue.js CSSを操作して、スタイルを動的に設定する(v-bind:style)

Vue.jsでもスタイルの操作が可能です。 バインディングもされますので、オブジェクトの値を変えるだけでスタイルを変更することができます。 アイデア次第で面白いものが作れそうですね。 早速簡単なものを …

Vue.js v-forでインデックス(カウンタ)を付けるサンプル(v-forでindex)

Vue.jsも少しずつ勉強していこうと思います。 そのままでも便利なv-forですが、何回目のループかを知りたい場合があります。 その場合もv-forだけで対応可能です。具体的にはv-forで展開され …

Vue.js for文のような繰り返し処理はどうやるの?サンプル(v-for)

もちろんVue.jsにも繰り返し処理があります。 「v-for」を使います(分かりやすい名前ですね)。 早速、どうやるのか試していきましょう! スクリプト(Vue.js for文のような繰り返し処理は …

Vue.js 双方向バインディングサンプル(v-model)

Vue.jsの強力な機能の1つに、双方向バインディングがあります。 難しそうな名前ですが、簡単に言うとスクリプト側の変数とHTML側の変数を結びつける機能です。 今回作るサンプルは、HTML側の「テキ …


comment

メールアドレスが公開されることはありません。