目录

格式化显示数据

计算购物车总价

过滤列表

依赖其他计算属性

---

在开发现代web应用时，Vue.js 作为一个轻量级且功能强大的前端框架，提供了许多便利的特性，其中计算属性（computed properties）是其最富盛名和实用的功能之一。计算属性允许开发者基于组件的数据动态生成新的数据。更重要的是，这些计算属性是响应式的，意味着依赖的数据更新时，计算属性也会自动更新。这一特性极大地简化了数据处理逻辑，同时也使得数据展示更加灵活和高效。

格式化显示数据

在很多应用中，数据展示往往需要一定的格式化。考虑一个简单的例子：你有一个用户列表，需要显示每个用户的全名，但数据源中的名字和姓氏是分开的。通过使用计算属性，我们可以轻松地整合这些信息。

new Vue({el: '#app',data: {users: [{ firstName: 'Li', lastName: 'Lei' },{ firstName: 'Han', lastName: 'Meimei' }]},computed: {fullNames() {return this.users.map(user => `${user.firstName} ${user.lastName}`);}}
})

在HTML中，我们可以直接绑定计算属性来显示这些全名：

<div id="app"><ul><li v-for