用vue写购物车常用的数量增加和减少吧！

最新推荐文章于 2024-07-06 18:15:35 发布

YangHuan3

最新推荐文章于 2024-07-06 18:15:35 发布

阅读量3.4k

点赞数 4

文章标签： vue.js html

本文链接：https://blog.csdn.net/qianluo111/article/details/120532975

版权

本文通过一个简单的Vue.js代码示例，展示了如何创建一个计数器组件，包括增加和减少功能。计数器能累加且在数值小于0时保持为0或1。代码中详细说明了各个部分的作用，包括数据定义、方法实现、UI绑定等，适合初学者理解Vue的响应式原理和事件处理。

摘要由CSDN通过智能技术生成

这个非常简单，我将步骤分开来弄，这样可以随时拿随时用。

先上效果图，

中间的是数量，

首先，要先确定几点，

1.data中定义数据，比如num

2.methods中添加两个方法，比如add(增加)和sub(减少)

3.使用v-text将num设置给span标签

4.使用v-on将add和sub分别绑定给+，-按钮

5.累加逻辑：是可以一直增加

6递减逻辑：当小于0 时，让他等于0或者1

展示未写效果的代码：

 <body>
    <div id="app">
      <!-- 计数器 -->
      <div class="input-num">
        <button @click="add">+</button>
        <span>{{num}}</span>
        <button @click="sub">-</button>
      </div>
    </div>
</body>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 编码 -->
<script>
  // 创建Vue实例
  var app = new Vue({
    el: "#app",
    data: {
      num: 1
    },
    methods: {
      add: function() {
        //console.log('add');
         if(this.num>0 || this.num==1){
            this.num++;
        }
        this.num++
    },
      sub: function() {
             //console.log('sub');
            if(this.num<0 || this.num==1){//当num小于0或者num等于1时让num的值等于1
                alert('已经是最少的了')
            }else{
                
                this.num--;
            }
        }
    }
  });
</script>
根据上面的步骤写出大致要实现的效果就是这些了！