【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

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

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

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

Vue.jsの学習におすすめ書籍
Vue.js入門 基礎から実践アプリケーション開発まで
総合評価
( 5 )
メリット
  • Vue.jsを初歩から実践まで徹底的に解説
  • Javascript初心者でも分かりやすい
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
目次

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アクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次