前言
菜鸡的我在vue项目中看到{ { a | b}} 还以为是一元运算符,结果没想到该用法是vue中的过滤器,下面简单介绍下相关知识点
过滤器用法
本文只介绍在vue文件中的局部用法
js代码-数据
data() {
return {
list: "",//过度VUE实列化用的数据
//初始数据
dataList: [
{
name: "tom",
age: "12",
sex: "man",
id: 1,
},
{
name: "torry",
age: "14",
sex: "woman",
id: 2,
},
{
name: "alise",
age: "33",
sex: "man",
id: 3,
},
{
name: "like",
age: "55",
sex: "man",
id: 4,
},
{
name: "iboy",
age: "12",
sex: "man",
id: 5,
},
],
};
},
一、在v-bind中使用
js-代码过滤方法
filters和methods同级
filters: {
bindValue(e) {
console.log("id", e.id);
return e.id * 10;
},
},
HTML代码
<div class="three">
<p>v-bind中使用</p>
<ul>
<li
:id="item | bindValue"
v-for="item in dataList"
:key="item.id | bindValue"
>
{
{ item.id }}
</li>
</ul>
</div>
效果:
二、在{ {}}插值表达式中使用
JS代码:
filters: {
screenAge(e) {
if (e.age > 12) {
//得到年纪大于12的数据
return e.name;
}
},
},
HTML代码:
<ul>
<li v-for="item in dataList" :key="item.id">{
{ item | screenAge }}</li>
</ul>
其中item就是数据,screenAge就是过滤的方法,返回的值也就是过滤后的值
效果:
过滤器传参
一个参数
{
{a | b}}
a就作为过滤器的第一个参数
两个参数
{
{a|b(one)}}
三个参数
{
{a|b(one,two)}}
JS代码
filters: {
twoValue(e, e1, e2) {
if (e.name == e1 || e.sex == e2) {
return e.name;
}
},
},
HTML代码
<div class="three">
<p>传多个个参数</p>
<ul>
<li v-for="item in dataList" :key="item.id">
{
{ item | twoValue("tom", "man") }}
</li>
</ul>
</div>
效果
使用多个过滤器
这里就只对插值表达式中的举列
{
{a | b | c}}
首先 a作为b的第一个参数传给b,b返回结果,然后b的结果作为参数再传给c,这就是使用多个过滤器的方法
不再乘上代码
注意
在过滤其中,不能直接获取到VUE的实列,简单的说就是你想要使用data()中定义的数据,在这里直接this.数据是会报错的,同时也不适用于发起HTTP请求,这里对想要使用data()中定义的数据做出例子
把使用的数据作为参数传入过滤器中,而非直接使用this.数据的方式
HTML代码
<div class="three">
<p>传多个个参数</p>
<ul>
<li v-for="item in dataList" :key="item.id">
{
{ item | twoValue("tom", "man", list) }}
</li>
</ul>
</div>
JS代码
过渡的数据在刚开始已定义,list
filters: {
twoValue(e, e1, e2, e3) {
try {
console.log("但是可以作为参数的方式传入", e3);
console.log("过滤器中能获取到VUE实列吗?", this.dataList);
} catch (e) {
console.log(e);
}
if (e.name == e1 || e.sex == e2) {
return e.name;
}
}
},
mounted() {
//可在生命周期中做处理
this.list = this.dataList[1].sex;
},
效果:
可以看到过滤器中直接使用this.dataList出现明显报错
该内容适用于笔者自己回顾用,也希望能帮助到您,觉得繁琐可以看看其他博文,建议看完手打一边