こちらの記事では、Vue.jsのv-bindを使ってタグに付与する属性(id,class,href,etc…)を動的に設定する方法についてサンプルコードを用いて解説します。
v-bindは、よく使われるディレクティブの一つなのでしっかり覚えておきましょう。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
Vue.jsの学習におすすめ参考書
Vue.js入門 基礎から実践アプリケーション開発まで
v-bindとは
HTMLの要素にはidやclassなどの様々な属性を持たせることができ、動きのあるWebページやアプリケーションなどでは属性に指定する属性値を変更することが良くあります。
このような属性値が様々な値に変化する要素に対してv-bindを使うことで、簡単に属性値を動的に設定・変更することができます。
v-bindの書き方
実際にv-bindを使った書き方と、実行結果について見ていきましょう。<a v-bind:href="url">{{ urlTitle }}</a>
v-bind:属性=”属性値(データ)”の形で記述します。初めのうちはデータの値を癖で{{ データ }}として記述してしまうことがありますが、Vue.jsのエラーに引っかかりますので、気をつけましょう。
要素にv-bindを設定したら、後はデータの値を設定して仕様に沿ったイベントなどで動的に値を更新する処理を記述します。
データの値を属性に設定する場合、毎回v-bind:属性と記述するのが手間に感じる方も多いと思います。
実は、v-bindは「:属性」の形に省略して書くことができます。省略できるからと言って、全ての案件で省略して書いてしまうと「:」と「v-bind:]
が混ざってしまい、可読性の悪いコードになってしまうためチームで話し合い書き方を決めることをオススメします。
v-bindを使ったサンプルコード
こちらで紹介するサンプルでは、ユーザーがボタンをクリックしたら動的にURLを切り替える処理を実装しています。 <div id="app">
<button v-on:click="urlHtmlChange()">urlをv-htmlに変更</button>
<button v-on:click="urlOnceChange()">urlをv-onceに変更</button>
<a v-bind:href="url">{{ urlTitle }}</a>
</div>
<script>
export default {
name: "App",
data: function () {
return {
url: "#",
urlTitle: "",
};
},
methods: {
urlHtmlChange: function () {
this.url = "https://web-engineer-wiki.com/javascript/vue/v-html/";
this.urlTitle = "v-htmlの記事はこちら";
},
urlOnceChange: function () {
this.url = "https://web-engineer-wiki.com/javascript/vue/v-once/";
this.urlTitle = "v-onceの記事はこちら";
},
},
};
</script>
上記のサンプルコードでは、データにurl(hrefに設定する値)とurlTitle(aタグ内に入れるテキスト)を設定し、2つのボタンをクリックすると指定されているメソッドが実行され、データのurlとurlTitleを更新し再描画します。
まとめ
今回はVue.jsのv-bindについてご紹介しました。
最後にv-bindのポイントについて軽く復習しましょう。
- 動的に属性値を変えることができる
- v-bind:の記述を「:」に省略することができる