第6章过滤器

来源：互联网发布：圣诞唱诗班歌曲知乎编辑：程序博客网时间：2024/06/04 23:22

过滤器，本质上都是函数。

{{ 'abc' | uppercase }}// 'abc'=>'ABC'<span v-text="message | uppercase"></span>{{ message | filterFunction 'arg1' arg2 }}<span> {{ 'ddfe' | capitalize | reverse }} </span>//->'ddfe' => 'DeFe' => 'efdD'

6.1 内置过滤器
6.1.1 字母操作
1 capitalize
首字母转换为大写形式。
2 uppercase
所有字母转换为大写形式。
3 lowercase
所有字母转换为小写形式。

6.1.2 json过滤器
是JSON.stringify()的精简收缩版，可将表达式的值转换为JSON字符串。json可接受一个类型为Number的参数，用于决定转换后的JSON字符串的缩进距离。

6.1.3 限制
1 limitBy

<!--只显示开始的10个元素--><div v-for="item in items | limitBy 10"></div><!-- 显示第5个到15个元素--><div v-for="item in item | limitBy 10 5"></div>

2 filterBy

<div v-for="item in items | filterBy 'hello'"></div><!--只显示包含hello字符串的元素--><div v-for="member in didiFamily | filterBy 'ddfe' in 'name'"></div><!--过滤器只在用户对象的name属性中搜索ddfe-->

6.2 自定义过滤器
Vue.filter(ID,function(){})
其中第一个参数为过滤器ID，作为用户自定义过滤器的唯一标识；第二个参数则为具体的过滤器函数。过滤器函数以值为参数，返回转换后的值。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body>    <div id="fftabc">        {{message | reverseabc }}    </div><script src="../../js/vue.js"></script><script>    Vue.filter('reverseabc',function(value){        return value.split('').reverse().join('');    })    new Vue({        el : '#fftabc',        data : {            message : 'abc'        }    })</script></body></html>

这里写图片描述

阅读全文

0 0

第6章 过滤器

第6章过滤器