VUE计算属性理解

最新推荐文章于 2024-03-30 15:11:11 发布

bulosli

最新推荐文章于 2024-03-30 15:11:11 发布

阅读量224

点赞数

分类专栏： vue 前端文章标签： vue

本文链接：https://blog.csdn.net/qq_34831748/article/details/117293641

版权

前端同时被 2 个专栏收录

4 篇文章 1 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

我的理解，VUE的计算属性是将函数的计算结果作为一个标签，在页面中可以多次复用。

特点：是将将计算结果保存，多次调用是调用结果。而不像不同函数会调用一次计算一次。在方法内有参数变化时才会重新计算。

例子：通过时间戳来测试

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>
<body>
<!--view层，模板-->
<div id="app">
  <p>currentTime1：{{currentTime1()}}</p>
  <p>currentTime2：{{currentTime2}}</p>
  {{message}}
</div>

<script>
  var vm= new Vue({
    el:"#app",
    data:{
      message:"nihaoya"
    },
    methods:{
      currentTime1:function (){
        return Date.now();
      }
    },
    computed:{//计算属性
      currentTime2:function (){
        this.message;
        return Date.now();
      }
    }
  })
</script>

</body>
</html>

设置了两个方法普通方法currentTime1()和计算属性currentTime2。同时在计算属性中添加一个变量message。

通过这个例子可以知道，计算属性更像是一个变量。只要参数不变就返回之前的计算结果，有变化从新计算结果，有一点像缓存。

bulosli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE计算属性理解

我的理解，VUE的计算属性是将函数的计算结果作为一个标签，在页面中可以多次复用。特点：是将将计算结果保存，多次调用是调用结果。而不像不同函数会调用一次计算一次。在方法内有参数变化时才会重新计算。例子：通过时间戳来测试代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <s
复制链接

扫一扫