vue监听购物车数量变化及实现模糊查询

要点：使用过滤器和计算属性

<!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">
              <el-button @click="scope.row.count-=1" :disabled="scope.row.count<=0" >-</el-button>
              <span>{{scope.row.count}}</span>
              <el-button @click="scope.row.count+=1" :disabled="scope.row.count<=10" >+</el-button>
          </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指当前的数组值
     
     // 模糊查询前端可以做，但是如果数据是分页展示的，建议后端做模糊查询，因为每次点击页码来展示数据的时候，是向后端接口传参，然后返回数据，前端做模糊查询的话是在所有数据都有的情况下做模糊查询
　　// 其他：数组实例的find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
  　　　　数组实例的findIndex()方法的用法与find()方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1
</script>
</body>
</html>
reduce的其他用法：
1）最简单的就是我们常用的数组求和，求乘积了
var  arr = [];
var sum = arr.reduce(function(prev, cur, index, arr) {
    console.log(prev, cur, index);
    return prev + cur;
}，0)
console.log(arr, sum); // [] 0

高级用法：

2）（1）计算数组中每个元素出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

（3）数组去重

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

（4）将二维数组转化为一维

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

（5）将多维数组转化为一维

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

（6）对象里的属性求和

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

 

 

 

posted @ 2020-10-05 19:05  程序员瑶琴  阅读(351)  评论(0)    收藏  举报