Vue v-model

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">
      <label class="label">From</label>
    </div>
    <div class="field-body">
      <div class="field">
        <p class="control">
          <input class="input is-static" type="text" value="tingting" readonly>
        </p>
      </div>
    </div>
  </div>

  <div class="field is-horizontal">
    <div class="field-label is-normal">
      <label class="label">To: {{ inputname }} </label>
    </div>
    <div class="field-body">
      <div class="field">
        <p class="control">
          <input class="input" type="text" v-bind:placeholder="yourname" v-model="inputname">
        </p>
      </div>
    </div>
  </div>

  <button class="button is-primary is-light" v-on:click="thankyou">送出</button>

  </div>

JavaScript

new Vue({
	el: "#app",
  data: {
  	yourname: "請輸入您的暱稱",
    inputname: ""
  },
  methods: {
  	greeting(){
    	return "這是鐵人賽第五天！"
    },
    thankyou(){
    	alert( `${this.inputname}，謝謝你收看Vue x Rails 鐵人賽系列!`)
    }
  }
})