在vue-cli中写一个数量加减

vue实现汽车购票的加减

需求:最少减到1，减到1时颜色变灰并且不让再减，最大加到5，颜色变灰并且不再让加，效果如下：

html代码：

<template>
<div>
  <div class="zk-order">
    <section class="quota">应付总额:<span style="color: rgb(80,173,241);">￥{{666*count}}</span></section>
  </div>
  <div class="zkculation">
    <section>
      <div class="zkculation-left clear" style="border-bottom: 1px solid #E6E6E6;">实付票务<span class="zkculation-right">￥{{666*count}}/{{count}}人</span></div>
    </section>
    <section>
      <div class="zkculation-left clear">退款票务<span class="zkculation-right">￥{{666*count}}/{{count}}人</span></div>
    </section>
    <div class="number">
      <ul>
        <li><div class="btn-left" @click="subtract()" :class="{ 'active1':style1 }">-减人</div></li>
        <li><span class="zk-input">{{count}}人</span></li>
        <li><div class="btn-right" @click="add()" :class="{ 'active2':style2 }">+加人</div></li>
      </ul>
      <p></p>
    </div>
  </div>
</div>
</template>

:class="{ ‘active2’:style2 }" 是指动态改变样式

js代码：

<script>

  export default{
    name:'demo',
    data(){
      return{
        count:1,
        style1:false,
        style2:false,
        showcone:false,
      }
    },
    methods:{
      add:function(count){
        if(this.count>=5){
         this.style2=true;
         this.showcone=true;
          this.count=5;
        }else {
          this.count++;
         this.style1=false
        }
      },
      subtract:function(count){
        if (this.count<=1){
         this.style1=true;
         this.showcone=true;
          this.count=1;
        }else{
          this.count=this.count-1;
          this.style2=false
        }
      }
    }
  }
</script>

css代码：

<style scoped>
  .active1{color: rgb(173,173,173) !important;}
  .active2{color: rgb(173,173,173) !important;}
  .zk-order{width: 100%;padding: 20px;background: white;}
  .quota{font-size: 16px; color: black;margin-top: 15px;text-align: left;}

  section{width: 100%;font-size: 16px;color: black;}
  .zkculation{width: 100%;background: white;}
  .zkculation-left{text-align: left;padding: 20px 0 10px 0px;margin-left: 20px;}
  .zkculation-right{float: right;color: rgb(173,173,173);margin-right: 10px;}
  .clear:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
  .number{display: inline-block;margin: 13px auto;}
  ul,li{list-style: none;}
  li{float: left;}
  .zk-input{text-align: center;height: 36px;width: 60px;border: 1px solid rgb(80,173,241);display: block;line-height: 36px;color: black}
  li>div{width: 120px;height: 36px;border: 1px solid rgb(80,173,241);line-height: 36px;}
  li>.btn-left{border-bottom-left-radius:5px ;border-top-left-radius:5px ;border-right: none;;font-size: 15px;color: rgb(80,173,241)}
  li>.btn-right{border-bottom-right-radius:5px ;border-top-right-radius:5px ;border-left: none;color: rgb(80,173,241);font-size:15px}
</style>

整体代码：

<template>
  <div>
    <div class="zk-order">
      <section class="quota">应付总额:<span style="color: rgb(80,173,241);">￥{{666*count}}</span></section>
    </div>
    <div class="zkculation">
      <section>
        <div class="zkculation-left clear" style="border-bottom: 1px solid #E6E6E6;">实付票务<span class="zkculation-right">￥{{666*count}}/{{count}}人</span></div>
      </section>
      <section>
        <div class="zkculation-left clear">退款票务<span class="zkculation-right">￥{{666*count}}/{{count}}人</span></div>
      </section>
      <div class="number">
        <ul>
          <li><div class="btn-left" @click="subtract()" :class="{ 'active1':style1 }">-减人</div></li>
          <li><span class="zk-input">{{count}}人</span></li>
          <li><div class="btn-right" @click="add()" :class="{ 'active2':style2 }">+加人</div></li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>

export default{
  data () {
    return {
      count: 1,
      style1: false,
      style2: false,
      showcone: false
    }
  },
  methods: {
    add: function (count) {
      if (this.count >= 5) {
        this.style2 = true
        this.showcone = true
        this.count = 5
      } else {
        this.count++
        this.style1 = false
      }
    },
    subtract: function (count) {
      if (this.count <= 1) {
        this.style1 = true
        this.showcone = true
        this.count = 1
      } else {
        this.count = this.count - 1
        this.style2 = false
      }
    }
  }
}
</script>
<style scoped>
  .active1{color: rgb(173,173,173) !important;}
  .active2{color: rgb(173,173,173) !important;}
  .zk-order{width: 100%;padding: 20px;background: white;}
  .quota{font-size: 16px; color: black;margin-top: 15px;text-align: left;}

  section{width: 100%;font-size: 16px;color: black;}
  .zkculation{width: 100%;background: white;}
  .zkculation-left{text-align: left;padding: 20px 0 10px 0px;margin-left: 20px;}
  .zkculation-right{float: right;color: rgb(173,173,173);margin-right: 10px;}
  .clear:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
  .number{display: inline-block;margin: 13px auto;}
  ul,li{list-style: none;}
  li{float: left;}
  .zk-input{text-align: center;height: 36px;width: 60px;border: 1px solid rgb(80,173,241);display: block;line-height: 36px;color: black}
  li>div{width: 120px;height: 36px;border: 1px solid rgb(80,173,241);line-height: 36px;}
  li>.btn-left{border-bottom-left-radius:5px ;border-top-left-radius:5px ;border-right: none;;font-size: 15px;color: rgb(80,173,241)}
  li>.btn-right{border-bottom-right-radius:5px ;border-top-right-radius:5px ;border-left: none;color: rgb(80,173,241);font-size:15px}
</style>

以上就是这篇文章的全部内容