Vue——computed计算属性 例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>computed用法</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <input type="number" v-model="a">+
        <input type="number" v-model="b">
        <input type="text" v-model="c">
    </div>
    <script>
        const app = {
            data() {
                return {
                    a: 0,
                    b: 0
                }
            },
            //computed 存在缓存  1.首次加载时会调用 2.当计算属性所依赖的字段发生改变时会调用（更新）
            computed: {
                c: {
                    get() {
                        return parseInt(this.a) + parseInt(this.b);
                    },
                    set() {
                        // console.log("data.c" +
                        //     this._data.c);
                        console.log("set");
                    }
                },
                //如果没有set方法可以简写为
                // c() {
                //     return parseInt(this.a) + parseInt(this.b);

                // }
            }
        };
        const vm = Vue.createApp(app).mount("#app");
    </script>
</body>

</html>
posted @ 2023-01-09 20:35  菜彩  阅读(35)  评论(0)    收藏  举报