计算属性 computed
主要是用在页面需要通过计算来获得另外一个值的时候应用
注意1: 计算属性和data属性都是变量-不能重名. 用法和data相同
注意2: 函数内变量变化, 会自动重新计算结果返回
需求:计算两个数据的值
<template>
<div>
<p>和为: {{ num }}</p>
<p>{{ reverseMessage }}</p>
</div>
</template>
<script>
export default {
data() {
return {
a: 10,
b: 20,
message: "我是个字符串",
};
},
computed: {
num() {
return this.a + this.b;
},
reverseMessage() {
return this.message.split("").reverse().join("");
},
},
};
</script>
split("").reverse().join("")这一串是返回一个将一个字符串拆分数组,反序,再重新拼接回字符串的功能。
计算属性用于缓存
在编译过程中第一次遇到的时候正常运行,后面只要变量的数值不变,那么就直接在缓存中读取,不需要重新计算
return会把值放在缓存中,如数值变化,那么就需要重新计算了。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。