vue 系列计算属性 computed

最新推荐文章于 2023-04-02 20:50:09 发布

Mic_start

最新推荐文章于 2023-04-02 20:50:09 发布

阅读量144

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_37574218/article/details/105969416

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

计算属性与方法的区别:

计算属性是基于它们的依赖进行缓存的
方法不存在缓存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>{{sumComputed}}</div>
    <div>{{sumComputed}}</div>
    <div>{{sum()}}</div>
    <div>{{sum()}}</div>
</div>

<script src="../lib/vue.js"></script>

<script type="text/javascript">

    const vm= new Vue({
        el:"#app",
        data:{
            num:100
        },
        methods:{
            sum:function () {
                console.log("in methods")
                let total = 0;
                for (let i =0;i<=this.num;i++){
                    total+=i;
                }
                return total;
            }
        },
        computed:{
          sumComputed:function () {
              console.log("in computed")
              let total = 0;
              for (let i =0;i<=this.num;i++){
                total+=i;
              }
              return total;
          }
        }
    })
</script>
</body>
</html>

对应视频分享：computed

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Mic_start

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 系列计算属性 computed

计算属性与方法的区别:计算属性是基于它们的依赖进行缓存的方法不存在缓存<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><d...
复制链接

扫一扫