Vue.js

【Vue.js】クリックイベントの使い方について

こちらの記事では、Vue.jsでクリックイベントの使い方についてサンプルコードを用いて解説しています。

ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】

先輩くん
先輩くん
年収、休日数、労働環境等クラウドリンクが審査し、これらを通過した優良求人情報のみ紹介しているよ!
後輩ちゃん
後輩ちゃん
100%自社内開発の求人だから、SESのように職場環境が変わらないのがいいね!
簡単30秒で無料登録!

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

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

クリックイベントとは

クリックイベントとは、ユーザーがボタンなどをクリックした際に発火するイベントです。

数あるイベントの中でも使われる頻度が高く、一般的にはコンテンツの表示・非表示の切り替えやフォーム内に設置しているinput要素に使われることが多いです。

クリックイベントの使い方

クリックイベントの使い方は以下の通りです。
<button v-on:click="メソッド">テキスト</button>
<button @click="メソッド">テキスト</button>
<button v-on:click="count++">カウントアップ</button>

クリックイベントを発火させたい要素に対して「v-on:click=”メソッド”」または省略形の「@click=”メソッド”」を追記します。

3つ目の書き方は、可読性が悪くなるため推奨はされていませんが、簡単な処理であればメソッドを定義せずにHTMLに直接処理を書くことができます。
  new Vue({
    methods: {
      メソッド: function () {
        // 処理を記載
      },
    },
  });

次に、クリックイベントで定義したメソッド内に行いたい処理内容を書きます。

サンプルコード

こちらで紹介するサンプルコードは、2つのボタンがあり1つ目のボタンをクリックするとurlがGoogleに切り替わり2つ目のボタンをクリックするとurlがYahooに切り替わる内容です。

<div id="app">
  <button v-on:click="urlGoogle()">urlをGoogleに変更</button>
  <button v-on:click="urlYahoo()">urlをYahooに変更</button>
  <a v-bind:href="url">{{ urlTitle }}</a>
</div>
buttonタグにクリックイベントを定義します。1つ目のボタンにはurlGoogleメソッドを、2つ目のボタンにはurlYahooメソッドを指定しています。
  new Vue({
    el: "#app",
    data: function () {
      return {
        url: "#",
        urlTitle: "ボタンをクリックするとURLが変わるよ!",
      };
    },
    methods: {
      urlGoogle: function () {
        this.url = "https://www.google.com/";
        this.urlTitle = "Google";
      },
      urlYahoo: function () {
        this.url = "https://www.yahoo.co.jp/";
        this.urlTitle = "Yahoo";
      },
    },
  });

dataには初期値としてurlとurlTitleを定義します。urlにはボタンをクリックした時に設定したいurl先の情報に書き換え、urlTitleには表示させたいテキスト情報に書き換えます。

続いて、HTMLで指定したメソッド「urlGoogle」「urlYahoo」の処理を書きます。ボタンをクリックした時に行いたい処理内容は、urlとテキストの変更なので、dataで定義したurlとurlTitleに対応した情報に書き換える処理を書きます。

まとめ

今回はVue.jsのv-htmlにスコープのスタイルを当てる方法についてご紹介しました。

最後にポイントを軽くおさらいしましょう。

ポイント

  • クリックイベントを設定したい要素に対して、v-onclickまたは@clickを設定する
  • 簡単な処理であれば、HTMLに直接処理を書くことができる

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