分别用JavaScript，jQuery和vue做了一个简单的购物车加减按钮部分。

HTML：

<ul class="counter">
 <li id="minus"><input type="button" onclick="minuser()" value="-"/></li>
 <li id="countnum">0</li>
 <li id="plus"><input type="button" onclick="adder()" value="+"/></li>
</ul>

css：

（主要是去除按钮默认样式，赋予新样式）

ul,li{margin:0; padding:0; }
.counter li{float:left; list-style-type:none; width:30px; height:30px; text-align:center; line-height:30px; border:#999 thin solid; background-color:#fff}
.counter li input{font-size:20px; width:100%; height:100%; outline:none; -webkit-appearance:none; background:none; margin:0; padding:0; border: 1px solid transparent; border-radius: 0;}
#countnum{ border-left:hidden; border-right:hidden; color:#666}

用JavaScript：

function adder(){
	var count=document.getElementById("countnum").innerHTML;
	count=parseInt(count)+1;
	document.getElementById("countnum").innerHTML=count;
}
function minuser(){
	var count=document.getElementById("countnum").innerHTML;
	if(count<=0){
		count=0;
	}else{
		count=parseInt(count)-1;
	}	
	document.getElementById("countnum").innerHTML=count;
}

或者用jQuery：

function adder(){
	var count=$("#countnum").text();
	count=parseInt(count)+1;
	$("#countnum").text(count);
}
function minuser(){
	var count=$("#countnum").text();
	if(count<=0){
		count=0;
	}else{
		count=parseInt(count)-1;
	}	
	$("#countnum").text(count);
}

用vue:

HTML：

<p>vue版</p>
<ul class="counter">
 <li id="minus"><input type="button" v-on:click="minuser" value="-"/></li>
 <li id="countnum" >{{ count }}</li>
 <li id="plus"><input type="button" v-on:click="adder" value="+"/></li>
</ul>

vue：

new Vue({
	 el: '.counter',
  data: {
    count:0
  },
  methods: {
   adder: function () {
      this.count++;
    },
   minuser: function (event) {
     if(this.count<=0){
		 this.count=0;
	 }else{
		 this.count--;
	 }
    }
  }
});

效果图：点击后：