VUE => 计算属性 computed

1、什么是计算属性，有什么用

• 相信大家在vue的模板内用过表达式，很好用 => eg:

<template>
<div id="app">
{{num>=20 ? "大于等于20" : "小于20" }}
</div>
</template>
<script>
export default {
name: 'app',
data(){
return {
num: 444,
}
}
}
</script>

• 结果： 大于等于20
• 上面使用了一个很简单的三元表达式，很轻易的做了我们需要的一些判断，BUT 如果你需要的下面的情况呢 => eg:

<template>
<div id="app">
<!--这里写了一堆的东西，各种三元转化类型再字符串骚操作 -->
<!--只是累了凸显复杂一点的情况 -->
{{num>20 && num.toString().length>2 ? num*20 : String(num).split("")}}
</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
data(){
return {
num: 444,
}
}
}
</script>

• 可能你会觉得，我这样写也没问题，我思路清晰，没错，你现在是思路清晰，当你组件的代码标签越来越多，这个页面就会很难维护，这个时候你就需要计算属性出来拯救你了 => eg:

<template>
<div id="app">
<!-- 直接调用计算属性里面的方法 -->
{{countNum}}
</div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
name: "app",
components: {
HelloWorld
},
data() {
return {
num: 444
};
},
computed: {
//计算属性
co
3ff7
untNum() {
//如果大于20且长度大于2，则数值乘以20
if (this.num > 20 && this.num.toString() > 2) {
return this.num * 20;
} else {
//否则就切割成数组
return this.num.toString().split("");
}
}
}
};
</script>

• 这样就会清晰很多了