JSFiddle - React, Tailwind, and code Playground

by edith_tang

HTML

<div id="app">
  姓名：{{ fullName }}
  <button v-on:click="changeName">
    点击改变名字为John Doe
  </button>
</div>

JavaScript

var app = new Vue({
	el: '#app',
  data: {
  	firstName: "Jack",
    lastName: "Green"
  },
  computed: {
  	fullName: {
    	// getter
      get: function() {
      	return this.firstName + ' ' + this.lastName;
      },
      set: function(newValue) {
      	var names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[names.length - 1];
      }
    }
  },
  methods: {
  	changeName: function() {
    	this.fullName = 'John Doe';
    }
  }
})