JSFiddle - React, Tailwind, and code Playground

by yakun chen

HTML

<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>

<div id="app">
  {{ message }}
  <button @click="reverseMessage">Reverse Message</button>

  <button :disabled="submitBtnEnable">Button</button>

  <my-comp :some-message.sync="message">
   </my-comp>
</div>

JavaScript

var MyComp = Vue.extend({
  props: ['someMessage'],
  template: '<br/><div @click="changeMsg">every body ~ {{ someMessage }} </div>',
  methods: {
  	changeMsg: function() {
    	this.someMessage =  '变'
    }
  }
});

Vue.component('my-comp', MyComp);

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    someDynamicCondition: true
  },
  computed: {
    submitBtnEnable: function() {
      return false;
    }
  },
  components: {
    MyComp
  },
  methods: {
    reverseMessage: function() {
      this.message = this.message.split('').reverse().join('')
    }
  }
})