Vue.js的学习记录_6-优快云博客

本文深入探讨了Vue.js中计算属性的使用方法及其与methods的区别。通过实例演示了如何利用计算属性实现数据的动态更新，强调了计算属性在提高代码效率和可读性方面的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算的特性

vue.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Computed Properties</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h1>Computed Properties</h1>
    <div id="Vue-app">
        <button v-on:click = "a++"> Add to A</button>
        <button v-on:click = "b++">Add to B</button>
        <p>A - {{a}}</p>
        <p>B - {{b}}</p>
        <p>Age + A = {{addToA}}</p>
        <p>Age + B = {{addToB}}</p>
    </div>
    <script src="app.js"></script>
</body>
</html>

vue.js

new Vue ({
    el: '#Vue-app',
    data: {
        age : 20,
        a: 0,
        b: 0
    },
    methods: {
        /*addToA: function () {
             console.log('AddToA');
            return this.a + this.age;
        },
        addToB: function () {
                   console.log('AddToB');
            return this.b + this.age;
        }
        */
    },
    computed: {
        addToA: function () {
            console.log('AddToA');
            return this.a + this.age;
        },
        addToB: function () {
            console.log('AddToB');
            return this.b + this.age;
        }
    }
})