Vue

Vue.js 属性値とv-bind

リンク先のURL(href属性)などを制御したいときは、v-bindディレクティブを使う。ちなみにディレクティブとは、v-で始まる特別な属性のこと。

<div id="app">
<div v-text="message"></div>
</div>

<!-- 上は下と同じ結果になる -->

<div id="app">
<div>{{ message }}</div>
</div>

活用方法としては、下記のようなものが挙げられる。

See the Pen 属性値の操作 by git-cat-meow (@git-cat-meow) on CodePen.

読み込んだjsonなどからデータを出力するといったこともできそう。もちろんidやsrc、altなどの属性も使用することができる。

v-bindは省略していきなりコロンから書いても良い。v-bind:href → :href。

See the Pen Untitled by git-cat-meow (@git-cat-meow) on CodePen.

配列に入った属性をv-bindで呼び出すこともできる。うーん、便利。

カテゴリー: Vue
このサイトの主
投稿を作成しました 98

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る