Vue.js计算属性computed与watch（5）

 <div class="test">
    <p>原始的信息{{message}}</p>
    <p>计算后的信息{{ComputedMessage}}</p>
  </div>

 var myVue = new Vue({
    el: ".test",
    data: {
      message:12
    },
    computed:{
      ComputedMessage:function () {
        return this.message+10;
      }
    }
  });

 <div class="test">
    <p>原始的信息{{message}}</p>
    <p>计算后的信息{{MessageFunction()}}</p>
  </div>

 var myVue = new Vue({
    el: ".test",
    data: {
      message:12
    },
    methods:{
      MessageFunction:function () {
        return this.message+10;
      }
    }
  });

  <div class="test">
    <p>原始的信息{{fullName}}</p>
  </div>

  var myVue = new Vue({
    el: ".test",
    data: {
      firstName:"fur",
      lastName:"bool"
    },
    computed:{
      fullName:function () {
        return this.firstName+this.lastName
      }
    }
  });

  <div class="test">
    <p>原始的信息{{fullName}}</p>
    <button @click="fu">test</button>
  </div>

 var myVue = new Vue({
    el: ".test",
    data: {
      firstName:"fur",
      lastName:"bool",
      fullName:"sasas dsdsd dsds"
    },
    computed:{
      fullName:{
        get:function () {
          console.log("get")
          return this.firstName+this.lastName
        },
        set:function(value){
          var names=value.split(" ");
          this.firstName=names[0];
          this.lastName=names[names.length-1];
          console.log("set");
        }
      }
    },
    methods:{
      fu:function () {
        myVue.fullName="sasas dsdsd dsds";
        console.log(myVue.firstName);   //sasas
        console.log(myVue.lastName);  //dsds
      }
    }
  });