一个超级简单的计数器设置,如下
<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
}
}
}