Vue计算属性 computed

计算属性 computed

作用：监听数据变化，生成新值（该值不需要在data中定义）。

特性：依赖缓存进行计算，也就是说只有数据发生改变时，才会计算，若数据没有变化，则会直接取出缓存的值。

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时它们才会重新求值；多次调用，计算属性会立即返回之前的计算结果，而不必再次执行函数。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>computed</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div id="app">
            <div>
                语文：<input v-model="chineseScore" />
            </div>
            <div>
                英语：<input v-model="englishScore" />
            </div>
            <div>
                我的总分：{{totalScore}}
            </div>
        </div>
    </body>
</html>
<script type="text/javascript" charset="utf-8">
    var app = new Vue({
        el: "#app",
        data: {
            chineseScore: '',
            englishScore: ''
        },
        computed: {
            // 计算属性的 getter
            totalScore: function() {
                // `this` 指向 vm 实例
                return Number(this.chineseScore) + Number(this.englishScore);
            },
        }
    });
</script>

 

posted @ 2020-05-29 01:42  杵臼  阅读(104)  评论(0)  编辑  收藏  举报