要点：使用过滤器和计算属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>vue监听购物车数量及模糊查询</title> <script src="vue.js"></script> <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://unpkg.com/element-ui/lib/index.js"></script> </head> <body> <div id="app"> <div style="margin: 10px 0;"> <label>名称搜索:</label> <input v-model="searchInput" type="text" placeholder="请输入查询内容" style="width:300px;padding: 5px;"> </div> <el-table :data="searchData" border style="width: 100%"> <el-table-column label="图片"> <template slot-scope="scope"> <img :src="scope.row.url"> </template> </el-table-column> <el-table-column prop="name" sortable label="商品名称"> </el-table-column> <el-table-column sortable label="商品数量"> <template slot-scope="scope"> <input value="-" @click="scope.row.count-=1" :disable="scope.row.count<=0" /> <span>{{scope.row.count}}</span> <input value="+" @click="scope.row.count+=1" :disable="scope.row.count<=10" /> </template> </el-table-column> <el-table-column prop="price" sortable label="商品单价"> </el-table-column> <el-table-column sortable label="商品金额"> <template slot-scope="scope"> <span>{{scope.row.count*scope.row.price | priceFilter(3)}}</span> </template> </el-table-column> <el-table-column prop="" sortable label="操作"> <template> <el-button>商品详情</el-button> </template> </el-table-column> </el-table> <div>{{totalCount}}件商品总计(不含运费):￥{{totalAmount}}</div> </div> <script type="text/javascript"> var vm = new Vue({ el: "#app", data:{ searchInput:‘‘, items:[{ name:‘苹果‘,price:10,count:10,url:‘./images/unlock.png‘ },{ name:‘车厘子‘,price:34,count:2,url:‘./images/unlock.png‘ },{ name:‘火龙果‘,price:30,count:3,url:‘./images/unlock.png‘ },{ name:‘桃子‘,price:20,count:10,url:‘./images/unlock.png‘ }] }, filters:{ // 过滤器，文本格式化 priceFilter:function(data,n){ return ‘￥‘+data.toFixed(n) // 保留2位小数 } }, computed:{ // 计算属性 searchData:function(){ var self =this // filter() 筛选 // 现在输入文字之后没有查到结果，因为this的指向不对，在回调函数和定时器中this的指向是window if (!this.searchInput) return this.items; return this.items.filter(function(item){ return item.name.indexOf(self.searchInput)!=-1 }) }, totalCount:function(){ // var n=0; // this.items.forEach(function(item,index){ // n+=item.count // }); // return n; // 换一种写法，将这里的items换成searchData，因为当我们查询了指定的水果之后，总计的数量和金额也要显示当前查询的 return this.searchData.reduce(function(total,cur){ return total+cur.count },0) //0 表示初始化的值 }, totalAmount:function(){ return this.searchData.reduce(function(total,cur){ return total+cur.count*cur.price },0) } } }) // 数组的reduce方法：var arr =[1,2,3,1,2,5] // var a =arr.reduce(function(total,cur){ // return total+cur // },10) 10是初始值，表示在10的基础上相加 // total就是前面所加的和，cur指当前的数组值 // 模糊查询前端可以做，但是如果数据是分页展示的，建议后端做模糊查询，因为每次点击页码来展示数据的时候，是向后端接口传参，然后返回数据，前端做模糊查询的话是在所有数据都有的情况下做模糊查询 </script> </body> </html>
原文：https://www.cnblogs.com/lita07/p/13771036.html