JSFiddle - React, Tailwind, and code Playground

by understore

HTML

<script src="https://unpkg.com/understore@latest/dist/understore.min.js"></script>
<div id="counter"></div>

CSS

counter{display: block;}

JavaScript

var tpl = "<counter>\
	<span>{ this.num }</span>\
    <input type='button' @click='incNum' value='증가'>\
    <input type='button' @click='decNum' value='감소'>\
</counter>\
";

var inc = function(e){
    var n = e.data.num + 1; 
    
    _.setItem({
    		id : e.id,
        idx : e.idx,
        data : {num : n}
    })

}

var dec = function(e){
    var n = e.data.num - 1;

    _.setItem({
    		id : e.id,
        idx : e.idx,
        data : {num : n}
    })
}

_.addItem({
		id : "counter",
    template : tpl,
    target : document.querySelector("#counter"),
    data : {
    	num : 0
    },
    events : {
    	incNum : inc,
      decNum : dec
    }
})