JSFiddle - React, Tailwind, and code Playground

by hunterliu

HTML

<div id="app">
  <p>fullName (computed)：${ fullName }</p>
  <p>fullName (watch)：${ fullNameWatch }</p>
</div>

JavaScript

var vm = new Vue({
  el: '#app',
  delimiters: ['${', '}'],
  data: {
    firstName: 'John',
    lastName: 'Doe',
    fullNameWatch: 'John Doe'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName;
    }
  },
  watch: {
    firstName: function(val) {
      this.fullNameWatch = this.firstName + ' ' + this.lastName;
    },
    lastName: function(val) {
      this.fullNameWatch = this.firstName + ' ' + this.lastName;
    }
  }
});

vm.$data.firstName = 'Jane';