Vue 过滤

作者: ChangLau | 来源:发表于2018-08-29 11:18 被阅读3次

Vue 过滤

  • 全局定义
<input type="text" v-model='upper'>
<h4>{{upper|toUpper}}</h4>
Vue.filter('toUpper', function (value) {
    return value.toUpperCase()
})
  • 局部定义
<input type="text" v-model='lower'>
<h4>{{lower|toLower}}</h4>
var app = new Vue({
    el: '#app',
    data: {
        upper: '',
        lower: ''
    },
    filters: {
        toLower(value) {
            return value.toLowerCase()
        }
    }
})
Vue过滤.png
  • 过滤器串联

过滤之后的值会依次传入到下一级过滤器中

<input type="text" v-model='upper'>
<h4>{{upper|toUpper|addSuffix}}</h4>
    Vue.filter('toUpper', function (value) {
    return value.toUpperCase()
})
var app = new Vue({
    el: '#app',
    data: {
        upper: '',
        lower: ''
    },
    filters: {
        addSuffix(value) {
            if (value) {
                return value + '@zhiliao.com'
            }
        }
    }
})
过滤器串联.png

相关文章

  • Vue过滤器和vue-resource

    过滤器 之前我们学习了Vue的 vue基本指令 进阶学习,我们需要了解Vue的过滤器:Vue.js允许你自定义过滤...

  • tool.js

    vue时间格式过滤器(今天,昨天,周几,年月日) vue金额过滤器 手机横屏签名功能(vue)

  • 6.Vue过滤器

    Vue过滤器: vue过滤器使用管道 | 进行调用,如:{{name | myFilter}},如果需要传入参数...

  • Vue-04

    过滤器:对显示在页面上的数据进行筛选 全局过滤器 和Vue同级 Vue.filter(“过滤器名称”,func...

  • vue 过滤器filter中this为undefined

    vue过滤器filters 中this为undefined 可以使用computed解决: vue中的过滤器更偏向...

  • vue自定义过滤器

    Vue的自定义过滤器有两种:全局过滤器和内部过滤器全局过滤器定义在vue实例化之前 内部过滤器注册在实例内部,仅在...

  • 关于angular与vue在过滤器方面的不同

    目前看来,angular与vue在过滤器方面差异较大,总的来说angular的过滤器较简单方便,vue的过滤器更像...

  • 9.自定义vue全局过滤器

    1.Vue.filter('过滤器名字',过滤器函数):

  • vue 过滤器做字数限制并显示省略号

    定义过滤器 使用vue中的 过滤器filters

  • Vue 学习一

    1》创建vue实例 2》vue实例的4个常用选项过滤器filters(小数过滤成整数)、计算属性computed(...

网友评论

    本文标题:Vue 过滤

    本文链接:https://www.haomeiwen.com/subject/yxuhwftx.html