vue代码统计(Vue实现计数器案例)
类别:编程学习 浏览量:2985
时间:2021-10-21 07:03:32 vue代码统计
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> <li id="app"> <input type="button" value="-" @click="sub"/> <span>{{num}}</span> <input type="button" value="+" @click="add"/> </li> <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在html里面怎么展示图片(v-html渲染组件问题)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vue找不到水印设置(Vue使用自定义指令实现页面底部加水印)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- vueelementui组件生成页面(Vue Element前端应用开发之树列表组件)
- vue左右滑屏(vue中实现全屏以及对退出全屏的监听)
- springbootvue项目代码(Vue+SpringBoot实现支付宝沙箱支付的示例代码)
- vue移动端返回在指定位置(vue移动端判断手指在屏幕滑动方向)
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- vue elementui 公共列表组件(Vue Element-ui表单校验规则实现)
- vue elementui 按钮样式修改(vue+elementui 实现新增和修改共用一个弹框的完整代码)
- vue 修改后刷新(Vue使用三种方法刷新页面)
- vue 单文件组件(vue实现一个单文件组件的完整过程记录)
- vue改数组和对象值(vue $set 实现给数组集合对象赋值)
- vueclass和style绑定(Vue中Class和Style实现v-bind绑定的几种用法)
- vue组件之间的通信(超详细的vue组件间通信总结)
- 律界衣品最好,时尚圈学识数高,41岁的Amal堪称现实版的傲骨贤妻(时尚圈学识数高)
- 刘智泰确认出演《Good Wife》 担纲男一号(刘智泰确认出演Good)
- 《傲骨之战》剧终 律政女魔头Diane,为什么是大女主天花板(傲骨之战剧终律政女魔头Diane)
- 汉族(汉族的祖先是谁)
- 中国有几个名族(中国有几个民族没列入56个民族)
- 数学语文题目(语文的数学题)
热门推荐
- laravel自定义命令(laravel-admin select框默认选中的方法)
- python html文字分段(Python对HTML转义字符进行反转义的实现方法)
- dede头部文件在哪(dede专题节点文章按id,点击等类型排序)
- python中的insert(python assert的用处示例详解)
- python3常用内建函数(Python3中函数参数传递方式实例详解)
- vue虚拟dom如何转换成真实dom的(vue中对虚拟dom的理解知识点总结)
- 用ILMerge合并多个DLL
- 自己在做项目过程中的php知识(PHP+Oracle本地开发环境搭建方法详解)
- javascript和jquery的区别详解(JavaScript与JQuery框架基础入门教程)
- nodejs子进程调试(Node.js实现断点续传)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9