<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>计数器</title> </head> <body> <div id="app"> <div class="input_num"> <button @click="add">+</button> <span>{{num}}</span> <button @click="sub">-</button> </div> </div> <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 () { if(this.num>=10){ alert("别点了,最大10"); return; } this.num++; }, sub: function () { if(this.num<=0){ alert("别点了,最小0"); return; } this.num--; } } }) </script> </body> </html>