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 数组功能来处理,但其中一些可能对您有用。