vue-

computed, watch

by Kim Ara

HTML

<div id="test">{{fullName}}</div>
<div id="test2">{{fullName2}}</div>

Vue

var vm = new Vue({
	el:'#test',
  data:{
  	firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch:{
  	firstName: function(val){
    	this.fullName=val+''+this.lastName
    },
    lastName: function(val){
    	this.fullName=this.firstName+''+val
    }
  }

})

var vm2 = new Vue({
	el:'#test2',
  data:{
  	firstName:'Foo',
    lastName:'Bar'    
  },
  computed:{  	
  	fullName2:{
    	//getter
      get:function(){
        return this.firstName+''+this.lastName
      },
      //setter
      set: function(newValue){
      	var names = newValue.split('')
        this.firstName=names[0]
        this.lastName=names[names.length-1]
      }
     }
  }
})