一般情况下属性都是放在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>
原文地址:https://www.cnblogs.com/xshan/p/12334927.html
时间: 2024-10-07 05:46:56