vue - filter 之全局和局部的使用

vue - filter

全局filter

    main.js:
        Vue.filter('setWH', (url, arg) => {
          return url.replace(/w\.h/, arg);
        })

    使用： <img :src="item.img | setWH('60.84')">

组件filter

    使用：
    <div 
        v-for="(itemT, index) in formatData(tag)" 
        :key="index"
        :class="index | formatVal('class')"
        >
            {{index | formatVal('value')}}
    </div>
                    
    filters: {
        formatVal(key, type) {
            const data = [
                {key: 'allowRefund', class: 'n1', value: '哈哈哈'},
                {key: 'endorse', class: 'n2', value: '哈哈哈2'},
                {key: 'sell', class: 'n3', value: '哈哈哈3'},
                {key: 'snack', class: 'n4', value: '哈哈哈'4}
            ];

            for(let i = 0; i < data.length; i++){
                if(data[i].key === key) {
                    return type === 'value' ? data[i].value : data[i].class;
                }
            }

            return '';
        }
    }
    
    filter传多参数：
        index | formatVal('value')
        - index 为第一个参数
        - value 为第二个参数

计算属性和过滤器

• 区别：

  • 计算属性
    - 依赖于一个固定的vue实例 ，在某一个实例中使用
    - 不接受额外参数，依赖于data属性中的变量
    - 有缓存管理机制，可减少页面调用次数
    - 计算属性虽默认为只读，但可以定义为对象，开启可读可写模式
    - 计算属性被作为一个类属性调用

  • 过滤器
    - 不依赖于实例。可以 定义一个全局过滤器，在多个实例中使用
    - 不要求是data中的变量，可以是临时变量。可接受额外参数
    - 无缓存机制，调用次数，取决于页面中有所多少过滤器
    - 只能读取操作
    - 过滤器被作为一个特殊方法处理

• 相同点： 都必须有返回值