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中的数据
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. Admin - SpringBoot + Maven 多启动环境配置实例详解2. Android WebView通过动态的修改js去拦截post请求参数实例3. SpringBoot2整合Ehcache组件实现轻量级缓存管理4. spring boot集成mongodb的增删改查的示例代码5. Django def clean()函数对表单中的数据进行验证操作6. 如何用python写个模板引擎7. django中嵌套的try-except实例8. 浅谈vue实现双向事件绑定v-model的原理9. Android自定义View实现气泡动画10. Django结合使用Scrapy爬取数据入库的方法示例
网公网安备