一个超级简单的计数器设置,如下
<body> <div id="app"> <span @click='sub'>-</span> <span v-text="num"></span> <span @click="add">+</span> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: "#app", data: { num: 1 }, methods: { add: function() { this.num += 1 }, sub: function() { this.num -= 1 } } }) </script> </body>
首先我们设置了+号和减号,分别设置他们是可以点击的,点击对应的方法分别是add和sub就是加和减
然后我们回到方法里边, add方法就是让data里边的num加1,(num初始值是1),sub则是让num-1
这样我们就可以通过加减来改变中间的值了,当然bug是它可以变成负数,看需求,如果你不想让他变成负数,那么可以加上if判断
methods: { add: function() { if (this.num >= 10) { alert("数字太大啦,小一点") } else { this.num += 1 } }, sub: function() { if (this.num <= 0) { alert("数字太小啦,大一点") } else { this.num -= 1 } } }
