• 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>

     
  • 相关阅读:
    成长之思考题
    HP LaserJet P2055dn 通过网络连接打印机用户指南
    【转载】大牛给计算机专业学生的7个建议
    CMake 复制文件方法
    Gitee Git bash VSCode操作简易说明
    Qwt 编译 配置 使用
    Clion+Cmake+Qt5+Qwt+msys2+MinGW在Windows下的安装配置使用教程
    基于Cmake+QT+VS的C++项目构建开发编译简明教程
    在WINDOWS中安装使用GSL(MinGW64+Sublime Text3 & Visual Studio)
    JavaScript学习(2)call&apply&bind&eval用法
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12801325.html
Copyright © 2020-2023  润新知