Vue中计算属性

　　一般情况下属性都是放在data中的，但是有些属性可能是需要经过一些计算才能得出，那么，我们可以把这类属性变成计算属性。此时，需要将这些计算属性写到computed中，和将属性写在data中是一样的。表面上看，计算属性和methods一样，实际上，计算属性更加智能，他是基于它们的响应式依赖进行缓存的。也就是说，只要相关依赖（比如下面的例子中的“area”）没有发生变化，那么这个计算属性的函数就不会重新执行，而是直接返回之前的值。这个缓存功能使计算属性访问起来更高效。

计算属性set：

set方法是用于修改data中定义属性的值的方法。例如先写了需要根据详细地址拆出省、市、区。在使用set方法时必须提供get方法。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>Vue中计算属性</title>
</head>

<body>
    <div id="app">
        <div>
            <label>长：</label>
            <input type="text" v-model:value="length2">
        </div>
        <div>
            <label>宽：</label>
            <input type="text" v-model:value="width2">
        </div>
        <div>
            面积：{{area}}
        </div>注：v-model:value是将该输入框的值与data中的值进行绑定。
        <h4>计算属性set：</h4>
        <div>
            <label>省：</label>
            <input type="text" name="province" v-model:value="province">
        </div>
        <div>
            <label>市：</label>
            <input type="text" name="city" v-model:value="city">
        </div>
        <div>
            <label>区：</label>
            <input type="text" name="district" v-model:value="district">
        </div>
        <div>
            <label>详细地址：</label>
            <input type="text" v-model:value="address">
        </div>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                length2: 0,
                width2: 0,
                province: '',
                city: '',
                district: '',
            },
            computed: {
                area() {
                    return this.length2 * this.width2
                },
                address: {
                    get() {
                        let ret = ''
                        if (this.province) {
                            ret += this.province + '省'
                        };
                        if (this.city) {
                            ret += this.city + "市"
                        };
                        if (this.district) {
                            ret += this.district + "区"
                        }
                        return ret
                    },
                    set(value) {
                        let ret = value.split(/省|市|区/)
                        if (ret && ret.length > 0) {
                            this.province = ret[0]
                        }
                        if (ret && ret.length > 1) {
                            this.city = ret[1]
                        }
                        if (ret && ret.length >2){
                            this.district = ret[2]
                        }
                    }
                }
            }
        })
    </script>
</body>

</html>

计算属性set：

猜你喜欢