您当前的位置:首页 > 网站建设 > javascript
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

Vue 计数器的实现

51自学网 2022-02-21 13:39:01
  javascript

1、计数器的实现

在页面上简单实现一个计数器:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../js/vue.js"></script></head><body><div id="app">  <h3>当前计数器:{{counter}}</h3>  <button @click="add">+</button>  <button @click="minutes">-</button></div><script>  const app = new Vue({    el: "#app",    data: {      counter: 0    },    methods: {      add: function () {        this.counter++;      },      minutes: function () {        this.counter--;      }    }  })</script></body></html>

2、实现效果

最后实现的效果,看下面的gif图:

到此这篇关于Vue 计数器的实现的文章就介绍到这了,更多相关Vue 计数器内容请搜索51zixue.net以前的文章或继续浏览下面的相关文章希望大家以后多多支持51zixue.net!


下载地址:
javaScript实现支付10秒倒计时
js实现支付倒计时返回首页
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。