8.过滤器

最新推荐文章于 2024-04-22 16:20:05 发布

亦难猿

最新推荐文章于 2024-04-22 16:20:05 发布

阅读量526

点赞数

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/T_testView/article/details/112354675

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在vue中，过滤器注意用来文本的格式化，或者数组数据的过滤和排序等。
全局过滤器：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>过滤器</title>
</head>
<body>
<!--
过滤器本质上是一个函数，与自定义指令相似，过滤器分为全局过滤器和局部过滤器。
全局过滤器通过使用Vue.filter()方法注册，该方法接受两个参数，第一个参数是过滤器的ID(即名字)，
第二个参数是一个函数对象，过滤器要实现的功能在这个函数中定义。（Vue.filter(id,[definition])）
-->
<div id="app">
 {{message | capitalize}}
</div>
<script>
        //全局过滤器:将字符串首字母转换为大写
        //1.当全局过滤器和局部过滤器重名时，会采用局部过滤器
        //2.全局过滤器可以在任何Vue实例的模板中使用
        //3.过滤器可以用在两个地方：爽花括号插值和v-bind表达式，
        //使用时通过管道符(|)添加到表达式的尾部使用
        //<a v-bind:href="url | lowercase"></a>
        //除此之外其他指令中都用不了
    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: {
         message: 'helloWord'
        }
    });
</script>
</body>
</html>



局部过滤器：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>过滤器</title>
</head>
<body>
<!--
过滤器本质上是一个函数，与自定义指令相似，过滤器分为全局过滤器和局部过滤器。
全局过滤器通过使用Vue.filter()方法注册，该方法接受两个参数，第一个参数是过滤器的ID(即名字)，
第二个参数是一个函数对象，过滤器要实现的功能在这个函数中定义。（Vue.filter(id,[definition])）
-->
<div id="app">
 {{message | capitalize}}
</div>
<script>

    var vm = new Vue({
        el: '#app',
        data: {
         message: 'helloWord'
        },
        //局部过滤器，
        // 1.当全局过滤器和局部过滤器重名时，会采用局部过滤器
        // 2.局部过滤器只能在该实例绑定的视图中使用
        // 3.过滤器可以用在两个地方：双花括号插值和v-bind表达式，
        // 使用时通过管道符(|)添加到表达式的尾部使用
        //<a v-bind:href="url | lowercase"></a>
        //除此之外其他指令中都用不了
        filters:{
            capitalize:function (value) {
                if (!value) return'';
                value = value.toString();
                return value.charAt(0).toUpperCase()+value.slice(1);
            }
        }
    });
</script>
</body>
</html>



过滤器接收多个参数：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>过滤器</title>
</head>
<body>
<!--
过滤器总是接收表达式的值作为第一个参数，如{{message|capitalize}}，
message的值作为capitalize过滤器函数的第一个参数。过滤器本质上是一个javaScript函数，自然也可以接收多个参数
多个参数写法还可以写为Vue.filter('format',function (value,...params)(这里使用了es6中的rest参数) 
-->
<div id="app">
 {{message | format('vue',suffix)}}
</div>
<script>
    Vue.filter('format',function (value,prefix,suffix) {
      if (!value) return'';
      value = value.toString();
      return prefix + "-" +value + "-" + suffix
    })

    var vm = new Vue({
        el: '#app',
        data: {
         message: 'helloWord',
            suffix: '你好世界'
        }
    });
</script>
</body>
</html>



多个过滤器的串联使用：
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../JS/vue.js"></script>
    <title>过滤器(串联过滤器)</title>
</head>
<body>
<!--
过滤器总是接收管道符(|)前的表达式作为第一个参数，利用该特性，可以将多个过滤器通过管道符串联起来使用，类似于方法链
的调用形式。
例如，有两个过滤器:将字符串转换为大写的过滤器和将字符串反转的过滤器，如果同时需要这两个功能，
就可以将这两个过滤器通过管道符串联在一起使用。
-->
<div id="app">
 {{message | uppercase |reverse}}
</div>
<script>
        //全局过滤器:将字符串转换为大写
    Vue.filter('uppercase',function (value) {
      if (!value) return'';
      value = value.toString();
      return value.toUpperCase();
    })
        //全局过滤器:将字符串反转
        Vue.filter('reverse',function (value) {
            if (!value) return'';
            value = value.toString();
            return value.split('').reverse().join('');
        })
    var vm = new Vue({
        el: '#app',
        data: {
         message: 'hello word'
        }
    });
</script>
</body>
</html>