こちらの記事では、Vue.jsのv-bindを使ってタグに付与する属性(id,class,href,etc…)を動的に設定する方法についてサンプルコードを用いて解説します。
v-bindは、よく使われるディレクティブの一つなのでしっかり覚えておきましょう。
- Vue.jsを初歩から実践まで徹底的に解説
- Javascript初心者でも分かりやすい
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
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:の記述を「：」に省略することができる