以下是一个简单的计算属性示例：
<template> <div> <p>原始价格：{{ price }}</p> <p>折扣后价格：{{ discountedPrice }}</p> </div> </template> <script> export default { data() { return { price: 100, discount: 0.2 }; }, computed: { discountedPrice() { return this.price * (1 - this.discount); } } }; </script>
在上述示例中，discountedPrice 是一个计算属性，它依赖于 price 和 discount 这两个响应式数据。每当 price 或 discount 发生变化时，discountedPrice 会重新计算并更新页面上的值。
使用计算属性可以使模板更加简洁，并且将一些逻辑从模板中移除，提高代码的可读性和维护性。当需要多次使用类似逻辑时，计算属性尤其有用，因为它可以确保逻辑在多处使用时保持一致。
总之，计算属性是 Vue.js 提供的一个强大的特性，可以让你更有效地管理视图逻辑和数据变换。
