vue——过滤器（单个和多个过滤器）

参考： https://www.cnblogs.com/liujn0829/p/8622960.html
           https://blog.csdn.net/z8735058/article/details/76824548

           https://cn.vuejs.org/v2/guide/filters.html

 

一、单个过滤器

 

　　1. 组件中（局部）　　

</template>
    <div>
        <p>{{number| addZero}}</p>
    </div>
</template>

<script>
     export default {
        filters: {
            addZero(value) {

　　　　　　　　　　if (value > 0 && value < 0.1) {
      　　　　　　　　return value;
    　　　　　　　 }
    　　　　　　　　var value = Math.round(parseFloat(value) * 100) / 100;
    　　　　　　　　var arr = value.toString().split('.');

    　　　　　　　　if (arr.length === 1) {
      　　　　　　　　  return value.toString() + '.0';
    　　　　　　　　} else {
      　　　　　　　if (arr[1].length === 1) {
        　　　　　　　　return value.toString() + '0';
      　　　　　　　} else {
        　　　　　　　　return value;
      　　　　　　　}
    　　　　　　}

 　　　　　　} 
　　　　}, 
　　　　data() { 
　　　　　　return { 
　　　　　　　　number: 12 
　　　　　　}
　　　  }
　　} 
</script>

 

　　2. 全局

　　

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

 

 

二、多个过滤器（全局）

1. 新建dfilter.js文件

   //可重用方法  过滤器
   const dfilters = {
     addZeroTwo: function(value) {
       if (value > 0 && value < 0.1) {
         return value;
       }
       var value = Math.round(parseFloat(value) * 100) / 100; //一定要用var声明，let会报错
       var arr = value.toString().split('.');
   
       if (arr.length === 1) { //个位数
         return value.toString() + '.00';
       } else {
         if (arr[1].length === 1) { //只有一位小数
           return value.toString() + '0';
         } else {
           return value;
         }
       }
     },
   
     addZeroOne: function(value) {
       if (value > 0 && value < 0.1) {
         return value;
       }
       var value = Math.round(parseFloat(value) * 100) / 100;
       var arr = value.toString().split('.');
   
       if (arr.length === 1) {
         return value.toString() + '.0';
       } else {
         if (arr[1].length === 1) {
           return value.toString() + '0';
         } else {
           return value;
         }
       }
     }
   }
   export default dfilters;

    

2. 在main.js中引入并注册（在new Vue前注册）

   import dfilters from '../static/js/dfilters';
   
   for (let key in dfilters) {
       Vue.filter(key, dfilters[key]);
   }

3. 在组件中使用

   <span>原价:¥{{price|addZeroTwo}}</span>