Vue.js

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

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

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

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

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

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

クリックイベントとは

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

数あるイベントの中でも使われる頻度が高く、一般的にはコンテンツの表示・非表示の切り替えやフォーム内に設置している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アクセスランキング にほんブログ村