JSFiddle - React, Tailwind, and code Playground

by edith_tang

HTML

<div id="app">
  <p>
  总数：{{ total }}
  </p>
  <my-component v-model="total"></my-component>
</div>

CSS

button {
  border-radius: 50%;
  width: 33px;
  height: 33px;
  border: none;
  background-color: skyblue;
  color: #fff;
  font-weight: bold;
}

JavaScript

Vue.component('my-component', {
	template: '<button @click="handleClick">+ 1</button>',
  data: function() {
  	return {
    	counter: 0
    }
  },
  methods: {
  	handleClick: function() {
    	this.counter++;
      this.$emit('input', this.counter)
    }
  }
})

var app = new Vue({
	el: '#app',
  data: {
  	total: 0
  }
})