vue项目中 添加全局的随机数、随机数数组filter过滤器，并在vue的methods中使用filter过滤器

首先在项目根目录下新建文件夹 filter，在 目录下新建文件 num.js 和 index.js

filter/num.js ：

// 生成从minNum到maxNum的随机数
export function randomNum(minNum, maxNum) { 
    switch(arguments.length){ 
        case 1: 
            return parseInt(Math.random() * minNum + 1, 10);
            break; 
        case 2: 
            return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); 
            break; 
        default: 
            return 0; 
            break; 
    } 
}

// 生成长度为len 从min 到max 的随机数组，参数小于3个或len<=1时，返回从min 到max 的随机数
export function randomNums(min, max, len) {
    if (arguments.length >= 3 && len > 1) {
        var arr = [];
        for (var i = 0; i < len; i++) {
            arr.push(randomNum(min, max));
        }
        return arr;
    } else {
        // console.log('args.len -> ' + arguments.length + '\nmin -> ' + min + '\nmax -> ' + max + '\nflag -> ' + (arguments.length == 2 || len <= 1))
        if (arguments.length == 2 || len <= 1) {
            return randomNum(min, max);
        } else {
            return randomNum(min);
        }
    }
}

filter/index.js ：

import Vue from 'vue'
//全局过滤器

import { randomNum, randomNums} from './num'

let obj = {
    randomNum,
    randomNums
}
for(let i  in obj){
    Vue.filter(i,obj[i])
}

在项目的 main.js 中引入filter 过滤器：

import Vue from 'vue'
import App from './App'

//引入全局过滤器
import './filter'

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

在vue的methos中使用过滤器：

<template>
  <div class="cloud_wrap"></div>
</template>
<script>
export default { 
  data() {
    return {
       randomData: []
    }
  },
  methods:{
    loadData() {
      // 调用过滤器（filter）方法randomNums(min, max, len)
      this.randomData = this.$options.filters['randomNums'](5000, 10000, 12);
    }
  },
  mounted() {
    this.loadData();
    const interval = setInterval(() => {
      this.loadData();
    }, 2000);

    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
    this.$once('hook:beforeDestroy', () => {         
      clearInterval(interval);                                    
    });
  },
};
</script>

<style scoped></style>

每天进步一点点，点滴记录，积少成多。

以此做个记录，

如有不足之处还望多多留言指教！