<style> * { margin: 0; padding: 0; } #app { display: flex; width: 300px; height: 50px; background-color: #ccc; margin: 50px auto; border-radius: 7px; box-shadow: 2px 7px 19px 3px rgba(0, 0, 0, .2); } span { display: inline-block; text-align: center; line-height: 50px; } button, span { flex: 1; } button { outline: none; border: 0; font-size: 20px; } #app button:nth-child(1) { border-top-left-radius: 7px; border-bottom-left-radius: 7px; } #app .two { border-top-right-radius: 7px; border-bottom-right-radius: 7px; } </style>
<body> <div id="app"> <button @click='add'>+</button> <span> {{ num }} </span> <button @click='sub' class="two">-</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script> // 创建Vue实例时: el(挂载点) data(数据) methods(方法) // 通过this关键字 可以获取data中的数据 var app = new Vue({ el: '#app', data: { num: 1, }, methods: { add: function() { if (this.num < 10) { this.num++; } else { alert('不能再加了哦 到头啦'); } }, sub: function() { if (this.num > 0) { this.num--; } else { alert('别减啦 到底啦'); } } } }) </script> </body>