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引入axios(vue封装axios的几种方法)
- vue加载html5动画(vue实现旋转木马动画)
- vue插槽实例(Vue中插槽slot的使用方法与应用场景详析)
- vue中的mapgetter优势(vuex 中辅助函数mapGetters的基本用法详解)
- vue左右联动列表(vue+iview的菜单与页签的联动方式)
- vuex怎么使用数据(vuex的辅助函数该如何使用)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue2.0自定义指令(vue2实现provide inject传递响应式)
- google 调试vue(Vue实现Google第三方登录的示例代码)
- vue 如何执行动态js(如何利用vue.js实现拖放功能)
- 详解从vue的组件传值着手观察者模式(详解从vue的组件传值着手观察者模式)
- vue移动端项目用什么打包工具(浅谈使用Vue完成移动端apk项目)
- vue如何检查数组变化(Vue2中无法检测到数组变动的原因及解决)
- vue慢动作怎么操作(vue开发之moment的介绍与使用)
- vue移动端页面不能上下滑动(vue移动端实现左滑编辑与删除的全过程)
- 王伦狭隘,晁盖霸道,宋江奸诈骨头软,只有鲁智深才适合当寨主(王伦狭隘晁盖霸道)
- 他是梁山最早的头目,江湖人称 旱地忽律 ,宋江几乎将其遗忘(他是梁山最早的头目)
- 梁山创始人杜迁,为何不受宋江待见,只排名83位(梁山创始人杜迁)
- 法国面包(法国面包法棍)
- 微信(微信分身)
- 双十二(双十二和双十一哪个划算)
热门推荐
- python爬取百度搜索pdf文档(Python实现的爬取百度文库功能示例)
- html5发送文字特效(HTML5调用手机发短信和打电话功能)
- laravel服务器设置教程(laravel框架模型、视图与控制器简单操作示例)
- mysql索引分几种(MySQL 覆盖索引的优点)
- 织梦cms文章页如何跳转(织梦CMS文档读取频道信息失败,无法进行后续操作!)
- mysqltruncate分区自定义参数(MySQL truncate table语句的使用)
- 云服务器的优点(云服务器都有哪些特点和优势)
- div中设置图片的大小(div或img图片高度随宽度自适应的方法)
- php中如何使用缓存(PHP使用OB缓存实现静态化功能示例)
- php连接oracle(PHP远程连接oracle数据库操作实现方法图文详解)