<input type="text" placeholder="请输入搜索内容" v-model="search">
<p v-for="(item, index) in searchMethod" :key="index">{{ item.name }}</p>
arr: [
{name: 'qq', baz: '1'},
{name: 'qq2', baz: '12'},
{name: 'q3q', baz: '13'},
{name: 'qq4', baz: '14'},
{name: 'qq5', baz: '15'},
{name: 'qq6', baz: '16'},
{name: 'qq7', baz: '17'},
{name: 'qq8', baz: '18'},
{name: 'qq9', baz: '19'},
search: ''
computed: {
searchMethod() {
return this.arr.filter(value => {
return value.name.match(this.search)
<input type="text" placeholder="请输入搜索内容" v-model="search"><p v-for="(item, index) in searchMethod" :key="index">{{ item.name }}</p>arr: [ {name: 'qq', baz: '1'}, {name: ...
(1)全局方法 Vue.filter() 注册一个自定义过滤器,必须放在Vue实例化前面
(2) 过滤器函数始终以表达式的值作为第一个参数。带引号的参数视为字符串，而不带引号的参数按表达式计算
(3)可以设置两个过滤器参数,前提是这两个过滤器处理的不冲突
(4)用户从input输入的数据在
Vue2.0删除了很多1.0的比较实用的
过滤器，如
filterBy，orderBy。官方文档给了通过计算属性
实现1.0
搜索过滤器
功能，自己又加入了大小写通用检索
功能，比较
简单，学一下。
<div class="app">
<input type="text" v-model="name">
//////加逗号 例3,000元
<p > 商品金额 <span style="color:#7D7D7D">{{moneySum | sum}} 元</span></p>
<p > 商品金额 <s
VueJs Filters介绍及其使用VueJs 提供了强大的过滤器API，能够对数据进行各种过滤处理，返回需要的结果目录VueJs Filters介绍及其使用
Vue 过滤器的基本用法
默认的过滤器
自定义过滤器
Vue 过滤器的基本用法// 注册
Vue.filter('my-filter', function (value) {
// 返回处理后的值
// getter，返回已
这是官方的例子https://cn.vuejs.org/v2/examp...这是根据你的数据在官方基础上修改的https://jsfiddle.net/ycloud/b...点击预览scriptvar vm = new Vue({
el: '#app',
data: {
search: '',
products: [{
name: '苹果',
pr...
<form action="" @submit="submitQuery" class="all_two">
<el-input v-model="input" placeholder="请输入内容" ref="search" style="width:300px;"></el-input>
</form>...
2. 在搜索框 input 中加入 v-model 指令，实现双向绑定。
```html
<input type="text" v-model="keyword" placeholder="请输入搜索关键词">
3. 在搜索按钮中加入 @click 事件监听器，通过调用过滤函数实现搜索功能。
```html
<button @click="search">搜索</button>
```javascript
methods: {
search() {
// 过滤数据，根据 keyword 进行搜索
// ...
4. 在数据过滤函数中，使用 Array.prototype.filter() 方法实现数据过滤功能。
```javascript
computed: {
filteredData() {
return this.data.filter(item => item.name.includes(this.keyword))
通过以上步骤，就可以实现一个简单的 Vue input 搜索功能了。
