有时,我们想要显示一个数组经过过滤或排序后的版本,而不进行实际变更或重置原始数据。在这种情况下,可以创建一个计算属性或过滤器,来返回过滤或排序后的数组。
在计算属性中,使用js原生自带的过滤函数过滤结果。
<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>