Vue计算属性筛选列表教程

data() {
  return {
    searchTerm: '',
    list: [
      { id: 1, name: '苹果', category: '水果' },
      { id: 2, name: '香蕉', category: '水果' },
      { id: 3, name: '胡萝卜', category: '蔬菜' }
    ]
  }
},
computed: {
  filteredList() {
    if (!this.searchTerm.trim()) return this.list;
    const keyword = this.searchTerm.toLowerCase();
    return this.list.filter(item =>
      item.name.toLowerCase().includes(keyword) ||
      item.category.toLowerCase().includes(keyword)
    );
  }
}

data() {
  return {
    searchTerm: '',
    selectedCategory: '', // '' 表示全部
    list: [/* 同上 */]
  }
},
computed: {
  filteredList() {
    return this.list.filter(item => {
      const matchesSearch = !this.searchTerm.trim() || 
        item.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
        item.category.toLowerCase().includes(this.searchTerm.toLowerCase());
<pre class="brush:php;toolbar:false;">  const matchesCategory = !this.selectedCategory || 
    item.category === this.selectedCategory;

  return matchesSearch && matchesCategory;
});

} }

computed: {
  getHighlightedText() {
    return (text) => {
      if (!this.searchTerm.trim()) return text;
      const escaped = this.searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      const regex = new RegExp(`(${escaped})`, 'gi');
      return text.replace(regex, '<span class="highlight">$1</span>');
    };
  }
}