vue累加计数器 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>vue的单击事件</title>
 6     <script type="text/javascript" src="./js/vue.js"></script>
 7     <script type="text/javascript">
 8 
 9     window.onload = function(){
10 
11         var app = new Vue({
12             el:".c",
13             data:{
14 
15                 //定义计数器
16                 counter:0,
17                 
18             }
19         });
20     }
21 
22     </script>
23 
24 </head>
25 <body>
26     <div class="c">
27         <!-- 定义一个按钮，使用counter做累加-->
28         <button v-on:click="counter += 1"><font size="2" color="blue">+</font></button>
29         <input type="text" v-model="counter" style="width: 40px;background-color: pink;text-align:center" />
30         <button v-on:click="counter -= 1"><font size="2" color="blue">-</font></button>
31     </div>
32 </body>
33 </html>

 

posted @ 2018-12-11 11:48  寒风孤影，江湖故人  阅读(2443)  评论(0)    收藏  举报