【Vue】计算属性computed:

Alkaid:

于 2021-09-12 22:37:43 发布

阅读量83

点赞数

分类专栏： Vue 文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_45867159/article/details/120257450

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文探讨了Vue.js中计算属性与方法的区别，强调计算属性在多次计算时的性能优势，因为它会缓存结果。示例代码展示了如何在模板中使用`price`和`num`数据来计算总价，通过`getTotalPrice()`方法和`totalPrice`计算属性的多次调用进行比较。计算属性`totalPrice2`进一步展示了如何在计算属性内部复用其他计算属性或方法。

摘要由CSDN通过智能技术生成

当页面中需要多次计算，可以使用计算属性，计算属性只会计算一次，并将计算结果缓存

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>单价：{{price}}</p>
    <p>数量：{{num}}</p>
    <p>总价：{{price * num}}</p>
    <hr>
    <p>总价：{{getTotalPrice()}}</p>
    <p>总价：{{getTotalPrice()}}</p>
    <p>总价：{{getTotalPrice()}}</p>
    <hr>
    <p>总价：{{totalPrice}}</p>
    <p>总价：{{totalPrice}}</p>
    <p>总价：{{totalPrice}}</p>
    <hr>
    <p>总价：{{totalPrice2}}</p>
    <p>总价：{{totalPrice2}}</p>
    <p>总价：{{totalPrice2}}</p>
</div>
</body>
</html>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            price: 10,
            num: 8
        },
        methods: {
            getTotalPrice() {
                console.log("getTotalPrice");
                var total = this.price * this.num;
                return total;
            }
        },
        computed: {
            totalPrice() {
                console.log("totalPrice");
                var total = this.price * this.num;
                return total;
            },
            totalPrice2() {
                console.log("totalPrice2");
                return this.getTotalPrice();
            }
        }
    });
</script>

Alkaid:

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Vue】计算属性computed:

当页面中需要多次计算，可以使用计算属性，计算属性只会计算一次，并将计算结果缓存<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <p>单价：{{price}}</p>
复制链接

扫一扫

专栏目录