vue中计算属性computed的特性和应用
特性：基于他们的依赖进行缓存，只要在他相关的依赖发生改变的时候，才会重新计算；
应用：基于template里面的{{ }}计算；处理props传值；处理后台返回的数据
<template>
<div class="ComputedProps">
{{ reservedMessage }}
<ul>
<li v-for="item in list" :key="item.id">
<span>姓名：{{ item.name }}</span>
<span>-------</span>
<span>性别：{{ sexComputed(item.sex) }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
name: "ComputedProps",
data() {
return {
message: "helloWorld",
list: [
{id: 1, name: "张三", sex: 0},
{id: 2, name: "李四", sex: 1},
{id: 3, name: "王五", sex: 0},
{id: 4, name: "赵六", sex: 1},
{id: 5, name: "钱七", sex: 1},
]
}
},
computed: {
//反转字符串
reservedMessage() {
return this.message.split("").reverse().join("")
},
//处理后台返回的数据
sexComputed() {
return (value) => {
switch (value) {
case 0:
return "男";
case 1:
return "女"
}
}
}
}
}
</script>
