Vue过滤器

最新推荐文章于 2024-07-04 10:07:27 发布

zoey-lyly

最新推荐文章于 2024-07-04 10:07:27 发布

阅读量110

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架文章标签： Vue

本文链接：https://blog.youkuaiyun.com/acmliying/article/details/99299139

前端框架专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Vue.js中过滤器的使用方法，包括全局过滤器和局部过滤器的定义及应用，通过实例展示了如何利用过滤器进行数据转换，如字符串首字母大写、数值操作等。

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

以下代码是Vue官方文档中的例子，将输入到input框中的字符串首字母大写输出

<div id="app">
    <input type="text" v-model="msg">
    <!-- msg 作为 唯一的参数传递给 capitalize -->
    <p>{{msg | capitalize}}</p>
    <!-- msg 作为 唯一的参数传递给add1,然后返回的值 作为唯一的参数传递给 capitalize -->
    <p>{{msg | add1 | capitalize}}</p>
    <!-- msg 与 'lucky' ' girl'三个同时作为参数传递给add2 -->
    <p>{{msg | add2('lucky',' girl')}}</p>
    <div :class="'color' | add1"></div> //div的class为 'color5'
</div>

过滤器可以定义全局，也可以定义局部，当两个同时存在时，局部的优先级高与全局，也就是说按照局部的过滤器执行

// 过滤器可以用在{{}}插值以及v-bind表达式,过滤器应该添加在js表达式的尾部
// 过滤器函数总接受表达式的值或者之前的操作链的结果作为第一个参数
Vue.filter('capitalize', function(value){
    if(!value) return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
})
var vm = new Vue({
    el: '#app',
    data: {
        msg: '',
    },
    filters:{
        capitalize: function(value) {
            if(!value) return '';
            value = value.toString();
            return value.charAt(0).toUpperCase() + value.slice(1);
        },
        add1: function(value){
            return value + value.length;
        },
        add2: function(value, arg1, arg2){
            return value + arg1 + arg2;
        }
    }
})