【Vue.js】v-bindとは？書き方と使い方について解説

こちらの記事では、Vue.jsのv-bindを使ってタグに付与する属性(id,class,href,etc…)を動的に設定する方法についてサンプルコードを用いて解説します。

v-bindは、よく使われるディレクティブの一つなのでしっかり覚えておきましょう。

Vue.jsの学習におすすめ参考書
Vue.js入門基礎から実践アプリケーション開発まで

本書情報
著者	川口和也
発売日	2018/9/22
ページ数	893ページ
Kindle版	○
レビュー (Amazon)	(93件)

Ｖｕｅ．ｊｓ入門基礎から実践アプリケーション開発まで /技術評論社/川口和也

posted with カエレバ

楽天市場

Amazon

Yahooショッピング

参考書が苦手な人はUdemyの動画がおすすめ
はじめてのVue.js 3 入門！
導入からアプリケーション開発まで体系的に学ぶ

動画情報
作成者	中村裕太
学習時間	5時間
受講者数	12,910人
レビュー	(2,509件)

動画の詳細はこちら

Contents

1 v-bindとは
2 v-bindの書き方
3 v-bindを使ったサンプルコード
4 まとめ

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:] が混ざってしまい、可読性の悪いコードになってしまうためチームで話し合い書き方を決めることをオススメします。

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を更新し再描画します。