全局过滤器vue

需求是：假设传过来一个值，这个值可能是个位数或多位数，如果是个位数的话，再前面拼接一个“0”，反之如果是多位数或以上就不拼接 ？

在uniapp的主入口文件main.js中定义全局过滤器。以下是在main.js中定义全局过滤器的示例代码:

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

Vue.filter('twoDigits', function(value) {
  // 判断传入的值是不是数字，如果不是数字就直接返回原值
  if (isNaN(Number(value))) {
    return value;
  }

  // 将传入的值转换为整数
  value = parseInt(value, 10);

  // 如果是一位数，在前面拼接一个“0”
  if (value < 10) {
    return '0' + value;
  }

  // 如果是两位数或以上，直接返回原值
  return value;
});

new Vue({
  render: h => h(App),
}).$mount('#app');

页面中使用 | 符过滤

<template>
  <div>
    <p>{{ num | twoDigits }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 7
    }
  }
}
</script>

示例中，{{ num | twoDigits }}将num的值转换为两位数，并在页面上显示出来。由于num的值为7，因此过滤器将在前面添加一个“0”，使其成为“07”。