138 - query case - knowledge points involved: foreach traversal & computed calculation attributes & V-for loop

138- Query case - Knowledge points involved :forEach Traverse &computed Compute properties &v-for loop

The effect is as follows ：

 

Project directory ：

 

 Home.vue The code is as follows ：

<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);
  },
  //  Two special life cycle functions :  Because being keep-alive Wrapped , Only these two functions 
  activated(){
    console.log(" Execute when the component is activated , When switched back , When displayed on the page ");
  },
  deactivated(){
    console.log(" Execute when the component is deactivated , When being switched out , When it disappears on the page ");
  }
}
</script>

Key components Comp1.vue The code is as follows ：

<template>
<!--  Homework explanation - Click to query the case  -->
  <div>
        <div class="top">
            <span> name </span>
            <input type="text" v-model.trim="txtVal" @keyup="hdKeyup"> 
            <!-- .trim Role is ： Go back and forth  -->
            <button @click="search"> Inquire about </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)"> Delete </button>
                </td>
            </tr>
            <tr>
                <td colspan=5> Total price for ：{
   {total}}</td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
  data () {
    return {
        txtVal:"",
        titles:["ID"," Main title "," Starting price "," operation "],
        info:[{
            "id": 287,
            "title": " Strictly select new model rooms ",
            "price_info": 29.9,
            "is_show": true
        }, {
            "id": 286,
            "title": " nothing “ oil ” Carefree sweet crisp ",	
            "price_info": 45,
            "is_show": true
        }, {
            "id": 283,
            "title": " A pair of shoes is indispensable for children's growth ",
            "price_info": 78,
            "is_show": true
        }, {
            "id": 282,
            "title": " Make a room full of bamboo shoots 1",
            "price_info": 121,
            "is_show": true
        }, {
            "id": 281,
            "title": " New style of stripes ",
            "price_info": 29,
            "is_show": true
        }, {
            "id": 277,
            "title": " Heal the softness of life ",
            "price_info": 66.78,

            "is_show": true
        }, {
            "id": 274,
            "title": " No cork tow , How to spend summer ",
            "price_info": 50.99,
            "is_show": true
        }, {
            "id": 272,
            "title": " Cooking should also be fine and simple ",
            "price_info": 69,
            "is_show": true
        }, {
            "id": 271,
            "title": " New lazy man of choice ",
            "price_info": 15.3,
            "is_show": true
        }, {
            "id": 268,
            "title": " The secret of delicious rice ： A breathing pot ",
            "price_info": 20.1,
            "is_show": true
        }]
 
    }
  },
  methods:{
    hdKeyup(){
      //  If the value entered by the user is empty ,  Just show all the data ( Of each item is_show Set to true)
      if(!this.txtVal){
        this.info.forEach(item=>{
          item.is_show=true
        })
      }
    },
    search(){
      if(!this.txtVal){
        alert(" Please input the content you want to query !");
        return
      }
      //  The logic of the query :   utilize v-show Show and hide . hold title Which contains the content entered by the user is_show Set to true, Otherwise set to false
      //  Because of each item is_show All have to be reset , So traverse info Array 
      this.info.forEach(item=>{
        //  Look at this one item Of title Contains the information entered by the user this.txtVal,  If you include 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)=>{
        //  Judge this item is_show, If it is true, add the price , Otherwise, don't add it ( Go straight back to 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)+" element "
    }
  }
}
</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>