Vue--过滤器

vue – 过滤器

一、Vue提供的过滤器

vue本身提供了很多便利的过滤器，这里列举一下，具体的可以参考官方文档过滤器。

例子中使用到的data和methods

data:{        message: 'hello world',        money: 12345,        num: [1,2,3,4,5],        obj: {            name: 'Linda',            age: 39,            sex: 'male'        },        arr:[{            name: 'lily',            age: 23        },{            name: 'lisa',            age: 24        },{            name: 'linda',            age: 25        },{            name: 'tom',            age: 26        },{            name: 'susie',            age: 21        }]    }，   //用于测试debounce的控制器     methods: {        fade: function(){            document.getElementById('btn-fade').style.display = 'none';       }    },

示例和运行结果截图

• json：输出经JSON.stringify()处理后的结果

  <div class="item">    <p>        <strong>格式化json</strong>    </p>    {{ obj | json }}</div>

  

  若不使用json过滤器，则结果如下图，这应该并不是我们想要的。

  

• capitalize：首字母大写

  <div class="item">    <p>        <strong>capitalize首字母大写:</strong>    </p>    {{ message | capitalize }}</div>

  

• uppercase：转化为大写表示

  <div class="item">    <p>        <strong>uppercase转换为大写表示:</strong>    </p>    {{ message | uppercase }}</div>

  

• lowercase：转化为小写表示

  <div class="item">    <p>        <strong>lowercase转换为小写表示:</strong>    </p>    {{ 'HELLO WORLD' | lowercase }}</div>

  

• currency： 格式化货币表示

  <div class="item">    <p>        <strong>currency输出货币表示第一个参数表示货币符号(默认为$),第二个参数是要保留的小数位数(默认为两位)</strong>:    </p>    {{ money | currency '£' 1 }}</div>

  

• pluralize： 给值添加后缀

  <div class="item">    <p>        <strong>pluralize如果只有一个参数，复数形式只是简单地在末尾添加一个 “s”。如果有多个参数，参数被当作一个字符串数组，对应一个、两个、三个…复数词。            如果值的个数多于参数的个数，多出的使用最后一个参数</strong>    </p>    <ul v-for="item in num">        <li>            {{ item }}{{ item | pluralize 'st' 'nd' 'rd' 'th' }}        </li>    </ul></div>

  

• debounce： 延迟执行处理器

  <div class="item">    <p>        <strong>debounce包装处理器,让它延迟执行x秒,默认延迟300ms:</strong>        <button id="btn-fade" @click="fade | debounce 3000">点击我,我将在3s后消失</button>    </p></div>

  

• limitBy： 输出数组中从偏移量位置(1)开始,一共4个元素

  <div class="item">    <p>        <strong>limitBy输出数组中从偏移量位置(num2)开始,一共num1个元素:</strong>        <span v-for="item in num | limitBy 4 1">{{ item }},</span>    </p></div>

  

• filterBy： 输出指定字符索引的值

  <div class="item">    <p>        <strong>输出arr中包含字母'l'的name</strong>    </p>    <ul v-for="item in arr | filterBy 'l' in 'name' ">        <li>{{ item.name }}</li>    </ul> </div>

  

• orderBy： 对给定的数组中的元素进行排序

  <div class="item">    <p>        <strong>通过年龄大小进行排序,默认升序.第二个参数的值>0(升序),<0(降序)</strong>    </p>    <ul v-for="item in arr | orderBy 'age' 1">        <li>{{ item.name }}</li>    </ul></div>

  

二、自定义过滤器

JS部分

    //自定义过滤器    filters: {        reverse: function(value){            return value.split('').reverse().join('')        }    }

Html部分

<div class="item">     <p>         <strong>过滤器的本质就是一个函数</strong>         <p>{{message | reverse}}</p>     </p> </div>