扫一扫下方二维码,关注本站官方公众号
回复:2020加油
获取永久解锁本站全部文章的验证码

vue-learning:19 - js - filters-Go语言中文社区

vue-learning:19 - js - filters


filters

  • 基本使用
    • 仅限在插值{{}}v-bind指令中使用
    • 管道符|分隔
    • 链式调用
    • 传入参数
  • 全局注册和局部注册
  • 纯函数性质(不能使用this

基本使用

我们看下之前用计算属性实现的例子,用过滤器实现

<!-- 假设后端返回的价格单位是分,显示格式要求¥0.00元 -->
<!-- expression -->
<div>price:¥ {{ (price / 100).toFixed(2) }}元</div>
<!-- computed -->
<div>price: {{ total }}</div>


<!-- filter -->
<div>price: {{ price | formatPrice1 }}</div>
<!-- filter with argument -->
<div>price: {{ price | formatPrice2('¥') }}</div>
<!-- filter by chain call -->
<div>price: {{ price | formatPrice3 | symbolType('¥') }}</div>
new Vue({
    el: "#app",
    data: {
        price: 100,
        memorySetterList: [],
    },
    computed: {
        total() {
            return `¥ ${(this.price / 100).toFixed(2)}元`
        }
    },
    filters: {
        formatPrice1(price) {
            return `¥ ${(this.price / 100).toFixed(2)}元`
        },
        formatPrice2(price,symbol) {
            return `${{symbol}} ${(this.price / 100).toFixed(2)}元`
        },
        formatPrice3(price) {
            return `${(this.price / 100).toFixed(2)}`
        },
        symbolType(price,symbol) {
            var list = new Map([
                ['¥','元'],
                ['$','美元'],
                ['€','欧元']
            ])
            return symbol + price + list.get(symbol)
        }
    }})

过滤器为我们格式化文本提供了更便捷的方法。并且price | filter比在表达式中直接写total更具可读性和扩展性。

过滤器总是将前一个值作为第一个参数传入,自定义参数从第二个开始。使用过滤器需要注意两个事项:

  • 不能使用this来访问其它数据或方法。
    这一点是故意设计成这样的,因为过滤器必须是纯函数。也就是说不管在哪里使用,同样的输入应该保证同样的输出。如果需要使用外部数据,可以作为参数传入。
  • 只能在插值{{ }}和指令v-bind中使用
    vue 1的版本可以任何可以使用表达式的地方使用,但是vue 2中取消了这种做法,并用v-bind的使用也是在vue 2.1.0中添加的。

过滤器注册

之前在vue作用域讲过,分全局作用域vue,实例作用域vm=new Vue(),组件作用域。

根据过滤器的使用范围过分别选择。

// 全局注册,可以在任何实例内或组件内使用
Vue.filter('filterName', function (value, arg) {
    // do something
})

// 实例注册,通过配置对象options属性传入
var vm = new Vue({
    el: "#app",
    data: {
        price: 10000
    },
    filters: {
        filterName(value,arg) {
            // do something
        },
    }
})

// 组件内注册,只限组件内使用,其它组件无法使用
export default {
    data() {
        return {
            price: 10000
        }
    },
    filters: {
        filterName(value,arg) {
            // do something
        },
    }
}

文件组织

一般我们使用过滤器,也就是因为有频繁操作,所以在项目中一般过滤器都是全局注册。在项目src文件中定义一个filters文件夹,新建一个index.js

import Vue from 'vue'

var filter1 = function (value, arg) { /* do something */ }
var filter2 = function (value, arg) { /* do something */ }
var filter3 = function (value, arg) { /* do something */ }

var filters = {
    filter1,
    filter2,
    filter3,
}

for (filter in filters) {
    Vue.filter(filter, filters[filter])
}

export default Vue
// 在main.js文件导入
import './filters/install'
版权声明:本文来源博客园,感谢博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://www.cnblogs.com/webxu20180730/p/10891616.html
站方申明:本站部分内容来自社区用户分享,若涉及侵权,请联系站方删除。
  • 发表于 2019-11-17 18:36
  • 阅读 ( 436 )
  • 分类:前端

0 条评论

请先 登录 后评论

官方社群