有时，我们想要显示一个数组经过过滤或排序后的版本，而不进行实际变更或重置原始数据。在这种情况下，可以创建一个计算属性或过滤器，来返回过滤或排序后的数组。
在计算属性中，使用js原生自带的过滤函数过滤结果。
孤狼 | 
2022-07-29 02:21:57 | 
1041°C | 
0条评论 ]<div v-for="item in zh">{{item}}</div>
computed: {
zh(){
return this.names.filter(function(name){
return name!='美国';//注意这里是条件表达式
})
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 计算属性过滤</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="item in zh">{{item}}</div>
</div>
<script>
let ndata={
names:['中国','美国','法国','小日本']
};
const app=new Vue({
el:"#app",
data:ndata,
computed: {
zh(){
return this.names.filter(function(name){
return name!='美国';
})
}
},
});
</script>
</body>
</html>
在函数中，使用js原生自带的过滤函数过滤结果。
<div v-for="item in gl(names)">{{item}}</div>
methods: {
gl(values){
return values.filter(function(name){
return name!='美国';//注意这里是条件表达式
})
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue 函数过滤</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="item in gl(names)">{{item}}</div>
</div>
<script>
let ndata={
names:['中国','美国','法国','小日本']
};
const app=new Vue({
el:"#app",
data:ndata,
methods: {
gl(values){
return values.filter(function(name){
return name!='美国';
})
}
},
});
</script>
</body>
</html>
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由 “|” 符号指示.
<div v-for="item in names">{{item | gl}}</div>
filters:{
gl(value){
return '国家:'+value;
}
}可以将多个过滤器串联使用，不过需要注意先后顺序。
<div v-for="item in names">{{item | gl2 | gl}}</div>
gl(value){
return '国家:'+value;
},
gl2(value){
if(value!='美国'){
return value;
}else{
return '大漂亮';
}
}过滤器默认会接收一个值作为参数，如果需要多个参数，可以给过滤器指定参数。
<div v-for="item in names">{{item | gl3('美国')}}</div>
gl3(value,value2){
if(value==value2){
return value+'滚蛋';
}else{
return value;
}
}TIP：filter过滤器 无法去除不要的结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue filters过滤器</title>
<script src="../vue.js"></script>
</head>
<body>
<div id="app">
<div v-for="item in names">{{item | gl}}</div>
<div v-for="item in names">{{item | gl2 | gl}}</div>
<div v-for="item in names">{{item | gl3('美国')}}</div>
</div>
<script>
let ndata={
names:['中国','美国','法国','小日本']
};
const app=new Vue({
el:"#app",
data:ndata,
filters:{
gl(value){
return '国家:'+value;
},
gl2(value){
if(value!='美国'){
return value;
}else{
return '大漂亮';
}
},
gl3(value,value2){
if(value==value2){
return value+'滚蛋';
}else{
return value;
}
}
}
});
</script>
</body>
</html>
赞赏一个鸡腿
