使用 vue-computed-helpers 简化常见的 Vue.js 计算属性

Computed Properties在Vue中是一个惊人的创新,真正减少了开发时间。其中一些最常见的用途是某些数据结构的本地减速器。(例如,从一个数组中拉出某个特定的元素,或者找到它的长度,或计算元素的数量等等)虽然这个代码并不特别复杂,但它也是一件相当烦人的事情,必须不断写。

安装

在您的 Vue.js 项目中安装vue-computed-helpers。

如果您正在使用 Yarn:

1yarn add vue-computed-helpers

关于NPM:

1npm install vue-computed-helpers --save

使用

视图计算助手提供了一些简单的辅助方法,如下所示,可用于在模板中创建自动更新的绑定。

例如:

 1[label Example.vue]
 2<template>
 3  <div class="alligator-information">
 4    <p>There are {{numberOfHappy}} happy alligators.</p>
 5    <div v-for="alligator of alligators">
 6      <p>Name: {{alligator.name}}</p>
 7      <p>Weight: {{alligator.weight}}</p>
 8    </div>
 9  </div>
10</template>
11
12<script>
13import { filter, count } from 'vue-computed-helpers';
14
15export default {
16  data() {
17    return {
18      alligators: [
19        {
20          name: "Betty",
21          weight: 850,
22          isHappy: true
23        },
24        {
25          name: "Thompson",
26          weight: 792,
27          isHappy: false
28        },
29        {
30          name: "Hubert",
31          weight: 927,
32          isHappy: true
33        }
34      ]
35    }
36  },
37
38  computed: {
39    happyAlligators: filter('alligators', 'isHappy', true),
40    // It's easy to build chains!
41    numberOfHappy: count(happyAlligators)
42  }
43}
44</script>

至於有助者,請參考下列資料。

最有可能的大多数使用案例都可以通过内置的 JS 数组功能来处理,但其中一些可能对您有用。