vue购物车数量+-组件

<template>
  <div class="number">
    <div class="jian" @click="minus">-</div>
    <div class="num">{{number}}</div>
    <div class="jia" @click="add">+</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
    	number:1
    }
  },
  methods:{
  	minus(){
  		this.number=this.number>1?this.number-1:1
  	},
  	add(){
  		this.number++
  	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.number{
	width: 2.731707rem;
    height: 0.853658rem;
    border: solid 1px #000000;
    border-radius: 3px;
    position: absolute;
    z-index: 1;
    right: 5%;
    top: 23%;
    overflow: hidden;
    font-size: 0.487804rem;
    .jian{
    	width: 0.829268rem;
	    height: 0.487804rem;
	    line-height: 0.487804rem;
	    border-right: #B5B5B5 solid 1px;
	    margin-top: 5%;
	    color: #B5B5B5;
	    text-align: center;
	    float: left;
    }
    .num{
    	width: 1rem;
	    height: 0.804878rem;
	    line-height: 0.804878rem;
	    border: none 0px;
	    outline: none;
	    -webkit-appearance: none;
	    text-align: center;
	    overflow: visible;
	    float: left;
    }
    .jia{
    	width: 0.829268rem;
	    height: 0.487804rem;
	    line-height: 0.487804rem;
	    border-left: #000000 solid 1px;
	    margin-top: 5%;
	    color: #000000;
	    text-align: center;
	    float: left;
    }
}
</style>

**

注意：

**：css用到了less，如果直接引入会报错，所以要先安装less插件，具体地址：https://www.cnblogs.com/lin-dong/p/6711224.html