利用 Vue.js 的计算属性精简和增强你的前端逻辑

目录

格式化显示数据

计算购物车总价

过滤列表

依赖其他计算属性

---

在开发现代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