用vue框架怎样实现简单的计数器？
发布时间：2022-02-25 13:33:35 所属栏目：语言 来源：互联网
导读：这篇文章主要给大家分享用vue框架实现简单的计数器，也就是在给定的数字范围可以增加或者减少数字，超出范围就提示，下文有实现代码和效果，感兴趣的朋友可以参考，接下来我们一起来学习一下吧。 过程注意事项 创建vue实例时：el（挂载点）data（数据）metho
|
这篇文章主要给大家分享用vue框架实现简单的计数器，也就是在给定的数字范围可以增加或者减少数字，超出范围就提示，下文有实现代码和效果，感兴趣的朋友可以参考，接下来我们一起来学习一下吧。 过程注意事项 创建vue实例时：el（挂载点）data（数据）methods（方法）。 v-on指令得作用是绑定事件，简写为@。 方法中通过this关键字获取data中的数据。 v-text指令的作用是：设置元素的文本值，简写为{{}}。 v-html指令的作用是：设置元素的innerHTML。 实际代码与截图 <html lang="en"> <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="sub"> - </button> <span>{{num}}</span> <button @click="add"> + </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(){ //console.log('add') if(this.num<10){ this.num++; }else{ alert('别点啦，最大了！'); } }, sub:function(){ //console.log('sub') if(this.num>0){ this.num--; }else{ alert('别点啦，最小了！'); } } }, }) </script> </body> </html> （编辑：济源站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
