如何在vue中使用过滤器和自定义指令

　　介绍

本篇文章给大家分享的是有关如何在vue中使用过滤器和自定义指令,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。

过滤器

过滤器可以对我们传入的数据进行必要的处理,并返回处理的结果

<李>

过滤器不会修改数据

<李>

过滤器的本质是函数

<李>

过滤器函数应该有参数,参数必须包含你想进行处理的源数据

<李>

过滤器应该有返回值,返回处理后的结果

export default { 　　,,,//,通过过滤器创建局部过滤器　　,,,过滤器:{ 　　,,,,,,,过滤器名称(数据){ 　　,,,,,,,,,,,//,对传入的data 进行处理　　,,,,,,,,,,,return 处理结果　　,,,,,,,},, 　　,,,} 　　}

02。怎么做

(1)定义过滤器

<李>

局部过滤器:定义在组件内部,只能在当前组件内使用

通过过滤器结构来创建

export default { 　　,,,//,通过过滤器创建局部过滤器　　,,,过滤器:{ 　　,,,,,过滤器名称(数据){ 　　,,,,,,,,,//,进行处理　　,,,,,,,,,return 处理结果　　,,,,,},, 　　,,,} 　　} <李>

全局过滤器:通过Vue。过滤器创建全局过滤器,一次只能创建一个,可以在任何组件中使用

需要在Vue实例创建之前定义

Vue.filter(过滤器名称,(数据),=祝辞,{ 　　,,,//do 一些　　,,,return 处理结果　　})

在单独的文件中创建一个全局过滤器
在需要用到的组件中引入,并在过滤器中注册

import Vue 得到& # 39;vue # 39;//,通过Vue.filter创建全局过滤器　　const filter1 =, Vue.filter(过滤器名称,(数据),=祝辞,{ 　　,,,//do 一些　　,,,return 处理结果　　})//,导出　　export { 　　,,filter1 　　} //,在组件中,引入过滤器　　{},filter1 import 得到& # 39;@/跑龙套filters.js& # 39; 　　　　export default { 　　,,,//,在组件内的,过滤器中,添加过滤器　　,,,//,过滤器既可以创建过滤器,又可以用来注册过滤器　　,,,//,只有在过滤器中注册的才会被认为是过滤器　　,,,过滤器:,{ 　　,,,,,,filter1 　　,,,} 　　}

(2)使用方式

<李>

在插值表达式{{}}中,或者v-bind表达式中,通过管道操作符——|来使用过滤器

<李>

格式:{{源数据|过滤器}}

& lt; div>,{{,数据,|,过滤器,}},& lt;/div> <李>

多次使用

过滤器支持多个并行使用,前者的处理结果,将作为后者的参数传入

& lt; div>,{{,数据,|,过滤器1,|,过滤器2,}}& lt;/div>

(3)过滤器的参数

<李>

如果没有手动传递参数,那么默认就会传递管道符前面的数据

<李>

如果手动的传递了参数,也不会影响默认参数的传递

<李>

过滤器函数的第一个参数永远是管道符前面的数据

<李>

而手动传递的参数,从参数列表的第二个开始,依次向后

03。封装过滤器函数

<李>

过滤器的本质就是一个函数,所以可以在一个单文件中直接封装一个过滤器函数

//,定义函数　　const filterA =,(),=祝辞,{} 　　const filterB =,(),=祝辞,{}//,导出函数对象　　export {filterA的不同之处是,filterB } <李>

然后再需要的组件内引入函数,并注册为过滤器

import *, as filters 得到& # 39;。/filters.js& # 39;//遍历,filters.js 内的方法　　种(过滤器).forEach (key =祝辞,{, 　　Vue.filter才能(关键,过滤器(例子)) 　　})

自定义指令

01。是什么

<李>

要对普通DOM元素进行底层操作,这时候就会用到自定义指令

<李>

也就是说自定义指令主要是对DOM元素进行操作

02。null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

过滤器