【Vue.js】ボタンを押して表示を切り替える

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 メソッドを定義。