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


    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>

     
  • 相关阅读:
    Windows 2003安全配置最佳方法(转)
    令人十分怨念的tomcat注册成windows服务(转)
    AMR开源编码jrtplib中与int系统重定义问题解决
    由系统熵转移的思考
    此男因为什么被送进医院?
    [转]风水师的郁闷
    飞盘奇门局例我能顺利办好护照拿到签证出国参加会议吗?
    最近工作方面发生了一些大事情,所以特地为此摇了一挂,请高手进来断一断。
    概率面前的错误
    杜新会一个精彩占例之反推
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12801325.html
Copyright © 2020-2023  润新知