Vue v-bind

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" value="tingting" readonly>
        </p>
      </div>
    </div>
  </div>

  <div class="field is-horizontal">
    <div class="field-label is-normal">
      <label class="label">To</label>
    </div>
    <div class="field-body">
      <div class="field">
        <p class="control">
          <input class="input" v-bind:placeholder="yourname">
        </p>
      </div>
    </div>
  </div>
 </div>

JavaScript

new Vue({
	el: "#app",
  data: {
  	yourname: "請輸入您的暱稱"
  },
  methods: {
  	greeting(){
    	return "這是鐵人賽第五天！"
    }
  }
})