自定义过滤器和全局过滤器
<p>{{arr|sortArray}}</p> 1
过滤方法中有一个参数，这个参数就是传进来的要过滤的元素
// 过滤器 filters:{ sortArray(a){ console.log(a);//(6) [1, 2, 3, 4, 5, 6, __ob__: Observer] } } 123456 使用过滤器时出现死循环
因为在将原数组排序后赋值给原数组，引用空间没有变化，过滤一直在执行
解决办法：
使用扩展符将数组赋值给新的变量，并且引用空间发生了改变，不会再循环
// 过滤器 filters:{ sortArray(value){ let [...array]=[...value]; //引用空间发生变化 array.sort((a,b)=>b-a); return array; } } 12345678 有参过滤
根据文本框的内容筛选符合条件的内容显示
<input type="text" v-model="txtval"> <p>{{testarray | slect(txtval)}}</p> 12
slect(value,txt){ let array=[]; for(let key of value){ if(key===txt){//满足条件的元素显示 array.push(key) } } return array; } } 12345678910
5.v-for里不能直接写管道符|过滤，可以将过滤条件添加在方法或者计算属性中
方法
forsort() { let array = [...this.arr]; console.log(array); //(6) [1, 2, 3, 4, 5, 6] array.sort((a, b) => b - a); return array; } 123456
写在计算属性中调用时不加执行（）
<p v-for="(item,index) in forsort" :key="index">{{item}}</p> 1
写在方法中时加（）执行方法
<p v-for="(item,index) in forsort()" :key="index">{{item}}</p> 1 全局过滤器
以上定义的过滤器均为局部过滤器，只能在当前组件使用
在src目录下新建一个filters文件夹,在filter目录下创建一个filter.js文件这里举一个数组排序从大到小的例子
看代码:
过程中因为名称问题报错，更改后成功
let arrSort = function(value) { let array=[...value]; array.sort((a,b)=>b-a); return array; } } export { arrSort } 1234567 在入口文件（main.js）中引入这个filter文件 (路径以你自己的为准)
import * as filter from './filters/filter' 1 在入口文件中全局注册filter
这个暂时没有查到讲解！！
//过滤器统一处理加载 Object.keys(filters).forEach(key => { Vue.filter(key, filters[key]) }) 1234 在组件中使用
<p>{{arr|arrSort}}</p> 1
页面显示：
[ 6, 5, 4, 3, 2, 1 ] 1
知识点补充;
一、import…as
import：导入一个模块；注：相当于导入的是一个文件夹，是个相对路径
import A as B：给予工具库 A 一个简单的别称 B ，可以帮助记忆。
二、from…import from…import：导入了一个模块中的一个函数；注：相当于导入的是一个文件夹中的文件，是个绝对路径。
例：如 from A import b,相当于
1 import A
2 b = A.b
三、结论 当引用文件时: import //模块.函数，导入模块，每次使用模块中的函数都要是定是哪个模块。
from…import //直接使用函数名使用就可以了 from…import* // 是把一个模块中所有函数都导入进来; 12
注：相当于：相当于导入的是一个文件夹中所有文件，所有函数都是绝对路径。
相关知识
花箱滴灌管 绿化带滴灌管全自动发冲洗叠片过滤器价格
办公室过滤器——鲜花
比例式水肥一体机
吸力自清洗过滤器（园林 喷灌）
施肥机
智能全自动灌溉设备温室花卉滴灌施肥机
节水喷头厂家
云智慧施肥机厂家 生产温室育苗花卉无土种植自动配肥水肥一体机
花卉滴剑厂家
几种水肥一体化灌溉系统的安装方案
网址: 自定义过滤器和全局过滤器 https://m.huajiangbk.com/newsview547401.html
| 上一篇: RDLC报表 在WinForm里 |
下一篇: [OL][活动] 5.27 |
