VUE实践专题

vue自定义过滤拦截器

定义

Vue.filter('MoneyFormat', function(money) {
    if (money && money != null) {
      money = String(money);
      var left = money.split('.')[0], right = money.split('.')[1];
      right = right ? (right.length >= 2 ? '.' + right.substr(0, 2) : '.' + right + '0') : '.00';
      var temp = left.split('').reverse().join('').match(/(\d{1,3})/g);
      return (Number(money) < 0 ? '-' : '') + temp.join(',').split('').reverse().join('') + right;
    } else if (money === 0) { // 注意===在这里的使用，如果传入的money为0,if中会将其判定为boolean类型，故而要另外做===判断
      return '0.00';
    } else {
      return '';
    }
})

/**
 * 倒计时
 * 
 */
export const countDown = (count, fn) => {
  let timer = null;
  return {
    removeTimer: () => {
      clearInterval(timer);
    },
    startTimer: (count) => {
      count = count;
      timer = setInterval(() => {
        if (count > 0) {
          count--;
          fn(count);
        } else {
          clearInterval(timer);
          timer = null;
        }
      }, 1000)

    }
  }
}

let timer = countDown(10, fun);
timer.startTimer(10);
timer.removeTimer();

使用

{{inCome | MoneyFormat}}

零散问题

1、种条件的class的写法

<span :class="{'equal':val.income == 0,'plus':val.income > 0,'minus':val.income <0 }">{{val.income > 0 ? '+' : ''}}{{val.income | MoneyFormat}}</span>