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: {
countNum() {
if (this.num > 20 && this.num.toString() > 2) {
return this.num * 20;
} else {
return this.num.toString().split("");
}
}
}
};
</script>