vue.js入门教程之计算属性

下面是关于“vue.js入门教程之计算属性”的完整攻略：

什么是计算属性

计算属性是Vue.js的一个重要特性，它能够对绑定的数据进行计算，然后返回一个新的值。

Vue.js官网对计算属性的介绍：

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要message没有发生改变，多次访问计算属性vm.reversedMessage会立即返回之前的计算结果（缓存）。

计算属性的使用

示例1：反转字符串

现在我们要反转一下文本框中的内容，并在其下方显示出来。我们可以通过定义一个计算属性来实现。

<div id="example">
  <input v-model="message">
  <p>反转后的文本为：{{ reversedMessage }}</p>
</div>

new Vue({
  el: '#example',
  data: {
    message: 'Hello Vue.js!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

在这个例子中，我们定义了一个计算属性reversedMessage，它返回的是this.message的反转结果。因为它是一个计算属性，所以每次访问它时，Vue.js都会自动计算它的值，并对其进行缓存。当我们修改this.message时，它才会重新计算。

示例2：统计在线用户名数

假设我们有一个在线聊天室，需要在界面上动态地统计当前在线的用户名数。为了实现这个功能，我们需要定义一个计算属性。

<div id="example">
  <ul>
    <li v-for="user in users">{{ user }}</li>
  </ul>
  <p>当前在线用户数：{{ userCount }}</p>
</div>

new Vue({
  el: '#example',
  data: {
    users: [
      'Alice',
      'Bob',
      'Charlie'
    ]
  },
  computed: {
    userCount: function () {
      return this.users.length;
    }
  }
})

在这个例子中，我们定义了一个计算属性userCount，它返回的是当前用户数组(this.users)的长度。每次用户数组改变时，Vue.js都会自动重新计算它的值，并对其进行缓存。因此只要用户数组没有改变，我们就可以重复访问它，而不会引起额外的开销。