zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    仙人球的残影
    Calculate the formula
    自定义代码段
    getter-setter方法练习
    封装
    Xcode文档安装
    Xcode模板修改
    匿名对象
    OC多文件开发介绍
    #pragma mark指令
  • 原文地址:https://www.cnblogs.com/linjiangxian/p/11454635.html
Copyright © 2011-2022 走看看