Vue 计算属性 computed

什么是计算属性？

计算属性的重点突出在 属性 两个字上。简单说就是一个能够将计算结果缓存起来的属性。

计算属性在内存中运行。

计算属性的主要特点就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <!--调用方法-->
    <p>currentTime1 {{currentTime1()}}</p>
    <!--调用属性-->
    <p>currentTime2 {{currentTime2}}</p>
</div>


<!--引入vue.js 包-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"hello,ckfuture"
        },
        methods:{
            currentTime1:function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
            //计算属性：methods computed 方法名不能重名。
            // 重名之后，只会调用methods的方法不会调用计算属性。
            currentTime1:function () {
                return Date.now();//返回一个时间戳
            }
        }
    });

</script>
</body>
</html>

 

posted @ 2021-01-22 21:16  创客未来  阅读(91)  评论(0)  编辑  收藏  举报