Vue computed多种使用场景和详细使用案例
夲奋亻Jay 2024-08-23 15:33:01 阅读 67
Vue的<code>computed属性是一种特殊的数据属性，它们根据组件中其他数据属性的值动态计算得出。computed属性是响应式的，只有当依赖的响应式数据发生变化时，计算属性才会重新计算。以下是一些常见的使用场景和详细案例：
1. 基于现有数据属性进行转换
假设你有一个价格数据，需要显示为货币格式。
<template>
<div>{ { formattedPrice }}</div>
</template>
<script>
export default {
data() {
return {
price: 100
};
},
computed: {
formattedPrice() {
return '$' + this.price.toFixed(2);
}
}
};
</script>
2. 根据多个数据属性进行逻辑判断
你可能需要根据多个数据属性来决定是否显示某个元素。
<template>
<div v-if="isEligible">code>
你符合条件！
</div>
</template>
<script>
export default {
data() {
return {
age: 18,
hasDriverLicense: true
};
},
computed: {
isEligible() {
return this.age >= 18 && this.hasDriverLicense;
}
}
};
</script>
3. 列表过滤
根据某个条件过滤列表数据。
<template>
<ul>
<li v-for="item in filteredItems" :key="item.id">code>
{ { item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [{ id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }, { id: 3, name: 'Orange' }],
filter: ''
};
},
computed: {
filteredItems() {
return this.items.filter(item => item.name.toLowerCase().includes(this.filter.toLowerCase()));
}
}
};
</script>
4. 列表排序
对列表数据进行排序。
<template>
<ul>
<li v-for="item in sortedItems" :key="item.id">code>
{ { item.name }}
</li>
</ul>
</template>
<script>
export default {
data() {
return {
items: [{ id: 3, name: 'Orange' }, { id: 1, name: 'Apple' }, { id: 2, name: 'Banana' }]
};
},
computed: {
sortedItems() {
return this.items.sort((a, b) => a.name.localeCompare(b.name));
}
}
};
</script>
5. 计算属性的依赖
计算属性可以依赖于其他计算属性。
<template>
<div>{ { discount }}</div>
</template>
<script>
export default {
data() {
return {
price: 100
};
},
computed: {
tax() {
return this.price * 0.07; // 7% tax
},
discount() {
return this.price * 0.1; // 10% discount
},
finalPrice() {
return this.price + this.tax - this.discount;
}
}
};
</script>
6. 与方法结合使用
计算属性可以结合组件方法使用，但要注意计算属性是缓存的，只有依赖发生变化时才会重新计算。
<template>
<div>{ { fullName }}</div>
</template>
<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
};
},
computed: {
fullName() {
return this.getFullName();
}
},
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName;
}
}
};
</script>
注意事项
计算属性是基于它们的依赖进行缓存的，只有当依赖发生变化时，计算属性才会重新计算。计算属性是同步的，适合进行简单的计算和逻辑判断。如果需要执行异步操作或更复杂的逻辑，应该使用方法（methods）。计算属性不适用于处理外部资源，如API调用。
通过上述案例，你可以看到Vue的computed属性在不同场景下的应用，它们可以帮助你以声明式的方式构建响应式的数据逻辑。
上一篇： HTML “文本处理基础”--文本格式化——WEB开发系列05
下一篇： SpringBootWeb 篇-深入了解 SpringBoot + Vue 的前后端分离项目部署上线与 Nginx 配置文件结构
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。