VUE实例课程---40、counter实例

一、总结

一句话总结：

counter实例就是用vue组件的方式做的计数小实例，把数据放在组件的data中，computed修饰数据，methods中放操作数据的方法

<template>
    <div>
        <div>click {{count}} times, count is {{evenOrOdd}}</div>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementIfOdd">increment if odd</button>
        <button @click="incrementAsync">increment async</button>
    </div>
</template>

<script>
    export default {
        name: "Counter",
        data:function () {
            return {
                count:1
            };
        },
        computed:{
            evenOrOdd:function () {
                return this.count%2===0?'偶数':'奇数';
            }
        },
        methods:{
            increment:function () {
                // console.log(this);
                this.count++;
            },
            decrement:function () {
                this.count--;
            },
            incrementIfOdd:function () {
                if(this.count%2===1){
                    this.count++;
                }
            },
            incrementAsync:function () {
                setTimeout(()=>{
                    this.count++;
                },1000);
            }
        }
    }
</script>

<style scoped>
button{
    margin-right: 10px;
}
</style>

二、counter实例

博客对应课程的视频位置：

Counter.vue

 1 <template>
 2     <div>
 3         <div>click {{count}} times, count is {{evenOrOdd}}</div>
 4         <button @click="increment">+</button>
 5         <button @click="decrement">-</button>
 6         <button @click="incrementIfOdd">increment if odd</button>
 7         <button @click="incrementAsync">increment async</button>
 8     </div>
 9 </template>
10 
11 <script>
12     export default {
13         name: "Counter",
14         data:function () {
15             return {
16                 count:1
17             };
18         },
19         computed:{
20             evenOrOdd:function () {
21                 return this.count%2===0?'偶数':'奇数';
22             }
23         },
24         methods:{
25             increment:function () {
26                 // console.log(this);
27                 this.count++;
28             },
29             decrement:function () {
30                 this.count--;
31             },
32             incrementIfOdd:function () {
33                 if(this.count%2===1){
34                     this.count++;
35                 }
36             },
37             incrementAsync:function () {
38                 setTimeout(()=>{
39                     this.count++;
40                 },1000);
41             }
42         }
43     }
44 </script>
45 
46 <style scoped>
47 button{
48     margin-right: 10px;
49 }
50 </style>