使用Vue做一个简单的计数器(仅作练习) 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>计数器案例练习</title>
 8 </head>
 9 
10 <body>
11     <div id="demo">
12         <h1>当前计数：{{counter}}</h1>
13         <!-- 监听事件 click-->
14         <!-- <button v-on:click="counter++">+</button>
15         <button v-on:click="counter--">-</button> -->
16 
17         <!-- 这样写可以给一个提示 -->
18         <button v-on:click="add">+</button>
19         <!-- 缩写 -->
20         <button @click="sub">-</button>
21     </div>
22     <script src="../js/vue.js"></script>
23     <script>
24         // 简写
25         const demo = {
26                 counter: 0
27             }
28             //常量
29         const app = new Vue({
30             el: "#demo",
31             //第一种写法
32             // data: {
33             //     counter: 0
34             // }
35             //第二种写法
36             data: demo,
37             // methods方法 可以定义函数
38             methods: {
39                 add: function() {
40                     console.log("加法执行了");
41                     this.counter++
42                 },
43                 // sub减
44                 sub: function() {
45                     console.log("减法执行了")
46                     this.counter--
47                 }
48             },
49         })
50     </script>
51 </body>
52 
53 </html>

 

posted @ 2020-12-24 17:29  温柔本肉  阅读(391)  评论(0)    收藏  举报