vue统计代码行数(vue实现计数器简单制作)
类别:编程学习 浏览量:2777
时间:2021-10-23 10:13:03 vue统计代码行数
vue实现计数器简单制作本文实例为大家分享了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> <li id="app"> <!--计数器功能区域--> <li class="input-num"> <button @click="sub"> - </button> <span>{{num}}</span> <button @click="add"> + </button> </li> </li> <!-- 开发环境版本,包含了有帮助的命令行警告 --> <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>
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- vue导出动态的excel功能(vue中如何下载excel流文件及设置下载文件名)
- vue实现树形结构菜单(vue递归实现三级菜单)
- vuecli配置环境变量(Vue CLI中模式与环境变量的深入详解)
- vue实现添加一段代码功能(Vue实现动态查询规则生成组件)
- vue跨域代理怎么写(解决vue $http的get和post请求跨域问题)
- vue怎么接收后台的数据(Vue封装全局toast组件的完整实例)
- vue文件上传进度处理(Vue 大文件上传和断点续传的实现)
- vue-cli请求数据的方式(vue-cli配置使用Vuex的全过程记录)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue调用后台接口实现预览(vue实现集成腾讯TIM即时通讯)
- vue websocket实时刷新数据(Vue+WebSocket页面实时刷新长连接的实现)
- vue路由跳转自动定位在哪里(Vue路由this.route.push跳转页面不刷新的解决方案)
- vue多个对象实现双向数据绑定(利用js实现Vue2.0中数据的双向绑定功能)
- vue双向数据绑定js如何实现(纯JS如何实现vue.js下的双向绑定功能)
- vue常用的指令和修饰符(Vue中 Vue.prototype使用详解)
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- 浙江省一个县,人口超40万,建县历史超1100年(浙江省一个县人口超40万)
- 五代十国南唐历代国君(五代十国南唐历代国君)
- 飞机引进工程师杨隆 匠人匠心,只争朝夕(飞机引进工程师杨隆)
- 三人行,她们是育人路上的 铁三角 团队(她们是育人路上的)
- 阴阳师 孟婆山兔CP不倒 新皮肤草稿 孟婆兔 让痒痒鼠点赞(阴阳师孟婆山兔CP不倒)
- 阴阳师孟婆御魂推荐 孟婆御魂搭配毕业套(阴阳师孟婆御魂推荐)
热门推荐
- mysql 8.0.22 winx64安装配置方法图文教程(mysql 8.0.22 winx64安装配置方法图文教程)
- css高级使用技巧(全面解析CSS Media媒体查询使用操作推荐)
- dedecms漏洞防范(浅析DedeCMS投票模块漏洞的解决方法)
- zabbix怎么监控容器(zabbix监控vmware exsi主机的图文步骤)
- docker容器端口和内部进程(Docker动态给容器Container暴露端口操作)
- windowsmysql服务在哪里(解决windows service 2012阿里云服务器在搭建mysql时缺少msvcr100.dll文件的问题)
- pythonmatplotlib散点图怎么画(python使用matplotlib画柱状图、散点图)
- dockerfile挂载目录(解决docker run中使用 ./ 相对路径挂载文件或目录失败的问题)
- php批量导出所有数据库(php快速导入大量数据的实例方法)
- sqlserver如何设置定时备份(SQL Server使用脚本实现自动备份的思路详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9