您现在的位置是：网站首页> 编程资料编程资料

vue 过滤、模糊查询及计算属性 computed详解_vue.js_

2023-05-24 561人已围观

简介 vue 过滤、模糊查询及计算属性 computed详解_vue.js_

什么是计算属性

概念

计算属性是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 ); }); } }

在这里插入图片描述