<input v-model="search">
<ul>
    <li v-repeat="photo in photos | filterBy search in 'name'">
        <img src="{{ photo.src }}" alt="{{ photo.name }}">
    </li>
    <li v-if="!photos.length">
        No results, sorry!
    </li>
</ul>

<input v-model="search">
<ul>
    <li v-repeat="photo in photos">
        <img src="{{ photo.src }}" alt="{{ photo.name }}">
    </li>
    <li v-if="!photos.length">
        No results, sorry!
    </li>
</ul>

var v = new Vue({
    data: {
        allPhotos: [...],
        photos: [],
        search: '',
    },
    ready: function () {
        var filter = Vue.filter('filterBy');
        var self = this;
        this.$watch('search', function () {
            self.photos = filter(self.allPhotos, self.search, 'name');
        }, {
            immediate: true
        });
    }
})

<input v-model="searchQuery">

<span v-if="!filteredItems.length">No results.</span>

<ul>
    <li v-for="item in filteredItems"></li>
</ul>

computed: {
  filteredItems: function () {
    var self = this;
    return self.items.filter(function (item) {
      return item.indexOf(self.searchQuery) !== -1;
    })
  }
}

<input v-model="searchQuery">

<span v-if="!filteredItems.length">No results.</span>

<ul>
    <li v-for="item in filteredItems"></li>
</ul>

computed: {
    filteredItems: function () {
        return this.$options.filters.肮脏的(this.items, this.searchQuery);
    }
}

computed: {
  filteredItems: function () {
    return this.$eval('items | 肮脏的 searchQuery');
  }
}

Vue.js相关问答推荐

当props 的值改变时如何更新类'

vue3中的转换可以在滑入但不能滑出时工作

为什么v-show需要组件的包装元素？

如何在AXIOS调用响应中动态导入视频并创建它的绝对路径？

从组件中检索 Shopware CMS 编辑器中的自定义实体数据

Vuetify 3 v-radio-group 将模型设置为 null

Nuxt3： 安装vue3-spinner (error： require is not defined in ES module scope)

在移动版本中使用标准的 v-data-table

在 Vue.js 2.6 的 Javascript 中访问 的内容

如何通过 setup() 发出多个参数？

VueJS：向左，元素的顶部位置？

使用 vee-validate 在 vue js 中进行验证有错误

eslint – 如何知道 defined定义规则的位置

Vue 和 TypeScript 所需的props

Keycloak：用户基于角色的客户端登录访问限制

NuxtServerInit 在 Vuex 模块模式下不起作用 - Nuxt.js

Vue：如何在按钮单击时调用 .focus()

按键删除对象不会更新vue组件

VueJS 路由 - 使用子路由和 Vuetify 时如何停止多个活动路由(active routes)？

$set 不是函数