zoukankan html css js c++ java

Vue基础练习之计算属性、方法、监听器

<body>
    <div id="root">
        {{fullName()}}
        {{age}}
    </div>

    <script>
        var vm = new Vue({
            el: "#root",
            data:{
                firstName:"Yu",
                lastName:"Lee",
                age:21,
            },

            //方法一：计算属性
            computed:{
                fullName:function () {
                    console.log("计算了一次");
                    return this.firstName +" "+this.lastName;
                }
            },

           //方法二：方法(无缓存)
            methods:{
                fullName:function () {
                    console.log("计算了一次");
                    return this.firstName +" "+this.lastName;
                }
            },

           //方法三：监听
           watch:{
               firstName:function () {
                   console.log("计算了一次");
                   return this.firstName +" "+this.lastName;
               },
               lastName:function () {
                   console.log("计算了一次");
                   return this.firstName +" "+this.lastName;
               }
           }
        })
    </script>
</body>

监听与计算属性均有缓存机制，所谓缓存机制就是"不依赖的属性发生改变时，不会重新计算一次“

查看全文

相关阅读:
分组密码之DES
QTreeWidget实现一个打包小工具
 实验吧web记录
 南邮CTF记录
 XSS学习之xss20
安全之路的一些参考
 sqlilabs_Less2128
sqlilabs_Less110
BUGKU练习
 看了几天的EXTJS了

原文地址：https://www.cnblogs.com/hyds/p/11289335.html