这节课我们继续改进一下上节课所写的计数器，添加一个最大值和最小值的限制。当累加到最大值时隐藏掉自增按钮，当减少到最小值时隐藏掉自减按钮。
计数器基本结构
新建一个demo3.html，复制上一节课的代码。 然后我们在 data 函数中声明两个变量maxNum:10 和 minNum:1 表示最大值和最小值。
data() {
return {
counter: 1,
maxNum:10,
minNum:0
}
},显示和隐藏按钮
在 template 中 给自减和自增按钮添加一个 v-if 指令，注意 v-if 是我们新接触到的模板指令，它的作用是如果右边条件成立就显示这个元素，如果右边条件不成立就不显示这个元素。
template: `<div>
<button v-on:click="descCounter" v-if="counter>minNum">-</button>
<span>{{counter}}</sapn>
<button v-on:click="addCounter" v-if="counter<maxNum" >+</button>
</div>`这样，只有 counter 大于 minNum 时才会显示自减按钮 ， counter小于maxNum显示自增按钮 ，否则就隐藏掉，是不是比操作dom来直接点。
好了， 这个例子就写完了，在结束之前，我告诉大家一个牛3的操作。我们可以把 v-on 事件绑定简写成 @ 。改一下代码，浏览器打开看一下，照样正常允许。
template: `<div>
<button @click="descCounter" v-if="counter>minNum">-</button>
<span>{{counter}}</sapn>
<button @click="addCounter" v-if="counter<maxNum" >+</button>
</div>`完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>计数器-手动版</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app"></div>
</body>
<script>
Vue.createApp({
data() {
return {
counter: 1,
maxNum:10,
minNum:0
}
},
methods: {
addCounter() {
this.counter++
},
descCounter() {
this.counter--
}
},
template: `<div>
<button @click="descCounter" v-show="counter>minNum">-</button>
<span>{{counter}}</sapn>
<button @click="addCounter" v-show="counter<maxNum" >+</button>
</div>`
}).mount("#app")
</script>
</html>