Vue.js

【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件)

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

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

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

まとめ

今回はVue.jsのv-bindについてご紹介しました。
最後にv-bindのポイントについて軽く復習しましょう。

ポイント

  • 動的に属性値を変えることができる
  • v-bind:の記述を「:」に省略することができる

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村