Vue computed

by tingtinghsu

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.0/css/bulma.min.css">
<div id="app">
  {{ greeting() }}


  <div class="field is-horizontal">
    <div class="field-label is-normal">
    </div>
    <div class="field-body">
      <div class="field">
        <p class="control">
          <input class="input" type="text" v-bind:placeholder="show_me_yourmoney" v-model="yourmoney">
        </p>
      </div>
    </div>
  </div>
  <button class="button is-primary is-light" @click="timesFive">乘以5倍！</button>
</div>

JavaScript

new Vue({
el: "#app",
  data: {
    show_me_yourmoney: "錢包裡有多少錢？",
    yourmoney: ""
  },
  methods: {
    greeting() {
      return "這是鐵人賽第六天！"
    },
    timesFive(){
    	this.yourmoney =  this.yourmoney * 5
    }
  }
})