計算屬性

v-model

針對表單輸入框做資料雙向綁定

<div id="app" v-cloak>

    <div class="form-group">
     <label for="firstName">名字</label>
     <input type="text" :class="form-control" v-model="firstName">
   </div>

   <div class="form-group">
     <label for="lastName">姓氏</label>
     <input type="text" :class="form-control" v-model="lastName">
  </div>

  <div class="form-group">
    {{firstName}}{{lastName}}
  </div>

</div>


<script>
(function(window){

  var data = {
    firstName:'Flora',
    lastName:'Hsu'
  }

  new Vue({
      el:'#app',
      data:data
  })

})(window)
</script>

範例點選

這樣的方式並不可以用 input 去綁定，所以要給他一個名字

<div class="form-group">
    {{firstName}}{{lastName}}
</div>

computed

額外增強資料的 getter 和 setter

<div id="app" v-cloak>

    <div class="form-group">
     <label for="firstName">名字</label>
     <input type="text" :class="form-control" v-model="firstName">
   </div>

   <div class="form-group">
     <label for="lastName">姓氏</label>
     <input type="text" :class="form-control" v-model="lastName">
  </div>

  <div class="form-group">
     <label>全名</label>
     <input class="form-control" v-model="fullName">
  </div> 

</div>



<script>
(function(window){

    var data = {
    firstName:'Flora',
    lastName:'Hsu'
  }


  new Vue({
    el:'#app',
    data:data,

    computed:{
      fullName:function(){
        return this.firstName + ' ' + this.lastName
      }
    }

  })

})(window)
</script>

範例點選