こちらの記事では、Vue.jsでクリックイベントの使い方についてサンプルコードを用いて解説しています。
ITエンジニア特化の転職サイト!
自社内開発求人に強い【クラウドリンク】
Vue.jsの学習におすすめ参考書
Vue.js入門 基礎から実践アプリケーション開発まで
クリックイベントとは
クリックイベントとは、ユーザーがボタンなどをクリックした際に発火するイベントです。
数あるイベントの中でも使われる頻度が高く、一般的にはコンテンツの表示・非表示の切り替えやフォーム内に設置している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>
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に直接処理を書くことができる