こちらの記事では、Vue.jsでクリックイベントの使い方についてサンプルコードを用いて解説しています。
- Vue.jsを初歩から実践まで徹底的に解説
- Javascript初心者でも分かりやすい
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
クリックイベントとは
クリックイベントとは、ユーザーがボタンなどをクリックした際に発火するイベントです。
数あるイベントの中でも使われる頻度が高く、一般的にはコンテンツの表示・非表示の切り替えやフォーム内に設置している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に直接処理を書くことができる