在Vue.js 2.0中按两个或多个selects筛选列表

在Vue.js 2.0中，按两个或多个selects筛选列表可以通过以下步骤实现：

创建一个Vue实例，并在data属性中定义需要筛选的数据列表和筛选条件的绑定值。例如：

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'Item 1', category: 'Category A' },
      { name: 'Item 2', category: 'Category B' },
      { name: 'Item 3', category: 'Category A' },
      { name: 'Item 4', category: 'Category C' },
      // ...
    ],
    selectedCategory: '',
    selectedName: ''
  },
  // ...
});

在HTML模板中使用v-model指令将select元素与绑定值进行双向绑定。例如：

<div id="app">
  <select v-model="selectedCategory">
    <option value="">All Categories</option>
    <option value="Category A">Category A</option>
    <option value="Category B">Category B</option>
    <option value="Category C">Category C</option>
    <!-- ... -->
  </select>
  
  <select v-model="selectedName">
    <option value="">All Names</option>
    <option v-for="item in filteredItems" :value="item.name">{{ item.name }}</option>
  </select>
  
  <ul>
    <li v-for="item in filteredItems">
      {{ item.name }} - {{ item.category }}
    </li>
  </ul>
</div>

在Vue实例中定义一个计算属性来根据筛选条件过滤数据列表。例如：

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'Item 1', category: 'Category A' },
      { name: 'Item 2', category: 'Category B' },
      { name: 'Item 3', category: 'Category A' },
      { name: 'Item 4', category: 'Category C' },
      // ...
    ],
    selectedCategory: '',
    selectedName: ''
  },
  computed: {
    filteredItems: function() {
      return this.items.filter(item => {
        if (this.selectedCategory && item.category !== this.selectedCategory) {
          return false;
        }
        if (this.selectedName && item.name !== this.selectedName) {
          return false;
        }
        return true;
      });
    }
  }
});

在上述代码中，根据selectedCategory和selectedName的值，使用filter方法对items进行筛选，返回符合条件的数据列表。

这样，当用户选择不同的筛选条件时，Vue会自动更新filteredItems计算属性的值，从而实现按两个或多个selects筛选列表的功能。

对于Vue.js的详细介绍和使用方法，可以参考腾讯云的Vue.js产品介绍页面：Vue.js产品介绍