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>