138-查询案例-涉及知识点:forEach遍历＆computed计算属性＆v-for循环

138-查询案例-涉及知识点:forEach遍历&computed计算属性&v-for循环

效果如下：

 

项目目录：

 

 Home.vue代码如下：

<template>
  <div class="home">
    <HelloWorld/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/Comp1.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  created(){
    console.log(this.$route.meta.isKeep);
  },
  // 两个特殊的生命周期函数: 因为被keep-alive包着,才有这两个函数
  activated(){
    console.log("组件被激活的时候执行,被切换回来的时候,被展示在页面上的时候");
  },
  deactivated(){
    console.log("组件被取消激活的时候执行,被切换出去的时候,消失在页面上的时候");
  }
}
</script>

关键组件Comp1.vue代码如下：

<template>
<!-- 作业讲解-点击查询案例 -->
  <div>
        <div class="top">
            <span>名称</span>
            <input type="text" v-model.trim="txtVal" @keyup="hdKeyup"> 
            <!-- .trim作用是：前后去空格 -->
            <button @click="search">查询</button>
        </div>
        <table>		
            <tr>		
                <th v-for="item in titles" :key="item">{
   {item}}</th>
            </tr>		
            <tr v-for="item,index in info" :key="item.id" v-show="item.is_show">
                <td>{
   {item.id}}</td>
                <td>{
   {item.title}}</td>
                <td>{
   {item.price_info.toFixed(2)}}</td>
                <td>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
            <tr>
                <td colspan=5>总价为：{
   {total}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
  data () {
    return {
        txtVal:"",
        titles:["ID","主标题","起步价格","操作"],
        info:[{
            "id": 287,
            "title": "严选新式样板间",
            "price_info": 29.9,
            "is_show": true
        }, {
            "id": 286,
            "title": "无“油”无虑的甜蜜酥脆",	
            "price_info": 45,
            "is_show": true
        }, {
            "id": 283,
            "title": "孩子成长中少不了的一双鞋",
            "price_info": 78,
            "is_show": true
        }, {
            "id": 282,
            "title": "成就一室笋香1",
            "price_info": 121,
            "is_show": true
        }, {
            "id": 281,
            "title": "条纹新风尚",
            "price_info": 29,
            "is_show": true
        }, {
            "id": 277,
            "title": "治愈生活的满怀柔软",
            "price_info": 66.78,

            "is_show": true
        }, {
            "id": 274,
            "title": "没有软木拖，怎么过夏天",
            "price_info": 50.99,
            "is_show": true
        }, {
            "id": 272,
            "title": "料理也要精细简单",
            "price_info": 69,
            "is_show": true
        }, {
            "id": 271,
            "title": "选式新懒人",
            "price_info": 15.3,
            "is_show": true
        }, {
            "id": 268,
            "title": "米饭好吃的秘诀：会呼吸的锅",
            "price_info": 20.1,
            "is_show": true
        }]
 
    }
  },
  methods:{
    hdKeyup(){
      // 如果用户输入的值为空, 就把所有的数据展示出来(每一项的is_show设置为true)
      if(!this.txtVal){
        this.info.forEach(item=>{
          item.is_show=true
        })
      }
    },
    search(){
      if(!this.txtVal){
        alert("请输入要查询的内容!");
        return
      }
      // 查询的逻辑:  利用v-show的显示和隐藏.把title中包含用户输入的内容的这一项的is_show设置为true,否则设置为false
      // 因为每一项的is_show都要重新设置,所以遍历info数组
      this.info.forEach(item=>{
        // 看看如果这一项item的title包含用户输入的信息this.txtVal, 如果包含item.is_show=true
        // if(item.title.includes(this.txtVal)){
        //   item.is_show=true
        // }else{
        //   item.is_show=false
        // }

        item.is_show=item.title.includes(this.txtVal)
      })
    },
    del(i){
      this.info.splice(i,1)
    }
  },
  computed:{
    total(){

      let ret = this.info.reduce((pre,cur)=>{
        // 判断这一项的is_show,如果为真就把价格加进去,否则就不加进去(直接返回pre)
        if(cur.is_show){
          return pre+cur.price_info
        }else{
          return pre
        }
        
        // return cur.is_show?(pre+cur.price_info):pre
      },0)
      return  "¥"+ret.toFixed(2)+"元"
    }
  }
}
</script>
 
<style lang = "less" scoped>
   *{margin: 0;padding: 0;}
        body{font-size: 14px; color:#666; padding-left: 50px;padding-top: 30px;}
        input,button{outline-style: none;}
        table{border: 1px solid #ddd;border-collapse: collapse; }
        td,th{border: 1px solid #ddd; width: 130px; height: 30px;text-align: left; padding: 10px;}
        .top{   
            display: flex;
            margin-bottom: 10px;
        }
        .top>*{
            margin-right: 20px;
        }
        .top span{
            line-height: 40px;
        }
        .top input{
            border:1px solid #ccc;
            border-radius:4px;
            padding-left: 8px;
            color:#666;
        }
        button{
            border:0;
            padding:10px 15px; background-color: skyblue;
            color:#fff;
            border-radius:4px;
        }
</style>