这篇文章主要为大家展示了“Vue如何实现计数器”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue如何实现计数器”这篇文章吧。
具体内容如下
效果：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计数器</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> #app{ text-align: center; margin: 0 auto; line-height: 500px; } #app input{ width: 50px; height: 40px; font-size: 20px; border-radius: 5px; outline: none; /* 自定义边框 */ border: 1px solid transparent; background-color: blue; line-height: 30px; color: white; } #app span{ padding: 20px 20px; border: 1px; } </style> </head> <body> <div id="app"> <input type="button" value="-" @click="sub"/> <span>{{num}}</span> <input type="button" value="+" @click="add"/> </div> <script> 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> </html>
data中写需要用到的数据： num
-methods中添加两个方法：加(add)、减(sub)
使用v-text或者差值表达式将num设置给span标签
使用v-on：(简写，@)将add、sub分别绑定给+、-按钮
累加的逻辑：小于10累加，否则提示
递减的逻辑：大于0递渐，否则提示
方法中通过this关键字获取data中的数据
以上是“Vue如何实现计数器”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
