vue 过滤、模糊查询及计算属性 computed详解
导读:什么是计算属性 概念...
什么是计算属性
概念
计算属性是vue里面为了简化在模板语法中对响应式属性做计算而存在的
什么时候应该使用计算属性
根据现有响应式的值得到一个新的值
1 、结构
2 、数据
data() {
return {
// 查询值
searchValue: "",
personInfo: [
{
personId: "gailun",
personIdAndName: "(gailun)盖伦",
personName: "盖伦"
},
{
personId: "aobama",
personIdAndName: "(aobama)奥巴马",
personName: "奥巴马"
},
{
personId: "psmart",
personIdAndName: "(psmart)ps",
personName: "ps"
}
]
};
},
3 、计算属性
computed: {
// 人员查询
personInfoListSearch() {
return this.personInfo.filter(o => {
return (
o.personId.indexOf(this.searchValue) > -1 ||
o.personName.indexOf(this.searchValue) > -1
);
});
}
}
到此这篇关于vue过滤 、模糊查询(计算属性computed)的文章就介绍到这了,更多相关vue过滤 、模糊查询内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!
声明:本站所有文章 ,如无特殊说明或标注 ,均为本站原创发布 。任何个人或组织 ,在未征得本站同意时 ,禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ,可联系我们进行处理 。
创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!