jyanken vue

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    
    <div id="app">
      <p>じゃんけん！</p>
      <button @click='guu'>グー</button>
      <button @click='tyoki'>チョキ</button>
      <button @click='paa'>パー</button>
      <p>わたしは、{{ watashi }}</p>
      <p>あいては、{{ aite }}</p>
      <p>この勝負…{{ result }}</p> 
    </div>
    
    <script src="script.js"></script>
  </body>
</html>


new Vue({
  el: '#app',
  data() {
    return {
      watashi: '',
      watashi_hand: '', 
      aite: '',
      aite_hand: '', 
      result: '' 
    }
  },
  methods: {
    guu() {
      this.watashi = 'グー'
      this.watashi_hand = 0
      this.aite_no_te()
      this.syouhai()
    },
    tyoki() {
      this.watashi = 'チョキ'
      this.watashi_hand = 1
      this.aite_no_te()
      this.syouhai()
    },
    paa() {
      this.watashi = 'パー'
      this.watashi_hand = 2 
      this.aite_no_te()
      this.syouhai() 
    },
    aite_no_te() {
      switch (Math.floor(Math.random() * 3))
      {
      case 0:
        this.aite = 'グー'
        this.aite_hand = 0
      break
      case 1:
        this.aite = 'チョキ'
        this.aite_hand = 1
      break
      case 2:
        this.aite = 'パー'
        this.aite_hand = 2
      break
      }
    },
    syouhai() {
      switch (((this.watashi_hand - this.aite_hand + 3) % 3)) 
      {
      case 0:
        this.result = '引き分けっ'
      break
      case 1:
        this.result = 'あなたの負け…'
      break
      case 2:
        this.result = 'あなたの勝ち！'
      break
      }
    }
  }
})

/* Styles go here */