【Vue.js】ボタンを押して表示を切り替える
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>タイトル</title> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <div id="app"> <button v-on:click="toggleMood"> <i class="material-icons" style="font-size: 48px;">{{ icon }}</i> </button> </div> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="js/main.js"></script> </body> </html>
v-on
ディレクティブを使ってclickイベント発火時に toggleMoode
メソッドを実行するように記述。
var app = new Vue({ el: '#app', data: { 'icon': 'mood' }, methods: { toggleMood: function (e) { this.icon = this.icon === 'mood' ? 'mood_bad' : 'mood'; } } });
methods
オブジェクトに toggleMood
メソッドを定義。