Vue-计算属性

最新推荐文章于 2024-11-01 14:29:13 发布

lengzher_5601

最新推荐文章于 2024-11-01 14:29:13 发布

阅读量60

点赞数 1

分类专栏： Vue 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/weixin_49512993/article/details/120582012

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章目录

Vue-计算属性
- - 八、计算属性

Vue-计算属性

八、计算属性

1、什么是计算属性？

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!

2、程序实例

<!DOCTYPE html>
<html lang="en" xmlns:v-if="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>{{currentTime1()}}</p>
    <p>{{currentTime2}}</p>
</div>
<!--导入Vue.js-->
<script src = "https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
           message:'Nihao!~'
        },
        methods:{
            currentTime1:function () {
                return Date.now();//返回一个时间戳
            }
        },
        computed:{
            currentTime2:function () {
                this.message;
                return Date.now();
            }
        }
    });

</script>

</body>
</html>

注意：methods和computed里的东西不能重名

methods：定义方法，调用方法使用currentTime1()，需要带括号
computed：定义计算属性，调用属性使用currentTime2，不需要带括号：this.message是为了能够让currentTime2观察到数据变化而变化
如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.message=”q in jiang"，改变下数据的值，再次测试观察效果!