vue 列表渲染以及列表的搜索和排序

v-for  遍歷數組/v-for遍歷對象

<template>
  <div>
    <h2>測試：v-for 遍歷數組</h2>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年齡</th>
          <th>號碼</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(pp,index) in persons" :key="index">
          <td>{{pp.name}}</td>
          <td>{{pp.age}}</td>
          <td>{{pp.phone}}</td>
          <td>
            <button @click="deleteP(index)">刪除</button>
            <button @click="edit(index,{name:'cat',age:23,phone:[phone]})">修改</button>
          </td>
        </tr>
      </tbody>
    </table>
    <h2>測試：v-for 遍歷對象</h2>
    <ul>
        <li v-for="(value,key) in persons[1]" :key="key">
            {{value}}---{{key}}
        </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      persons: [
        {
          name: "tom",
          age: 12,
          phone: [phone]
        },
        {
          name: "jack",
          age: 23,
          phone: [phone]
        },
        {
          name: "daata",
          age: 33,
          phone: [phone]
        },
        {
          name: "huawei",
          age: 56,
          phone: [phone]
        }
      ]
    };
  },
  methods: {
    deleteP(index) {
      this.persons.splice(index, 1);
    },
    edit(index, newP) {
      //   並沒有改變persons本身，數組內部發生了變化，但並沒有調用變異方法，vue不會更新界面
      //this.persons[index]=newP
      this.persons.splice(index,1,newP)
    }
  }
};
</script>
<style lang="less">
</style>

 

 

vue本身只監視了數組的改變，沒有監視數組內部的數據改變

vue重寫了數組中的一系列改變數組內部數據的方法（先調用原生，更新界面）--數組內部改變，界面發生變化

Vue的數組更新

Vue 包含一組觀察數組的變異的方法，所以他們也將會觸發視圖的更新。

push（）  pop（） shift（） unshift（） splice（） sort（） reverse（）

 

 排序和搜索

<template>
  <div>
    <h2>測試：v-for 遍歷數組</h2>
     <el-input placeholder="請輸入內容" v-model="searchname">
    <el-button slot="append" icon="el-icon-search"></el-button>
  </el-input>
    <table>
      <thead>
        <tr>
          <th>姓名</th>
          <th>年齡</th>
          <th>號碼</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(pp,index) in filterpersons" :key="index">
          <td>{{pp.name}}</td>
          <td>{{pp.age}}</td>
          <td>{{pp.phone}}</td>
          <td>
            <button @click="deleteP(index)">刪除</button>
            <button @click="edit(index,{name:'cat',age:23,phone:[phone]})">修改</button>
          </td>
        </tr>
      </tbody>
    </table>
     <el-button type="primary" @click="setOrderType(1)">年齡升序</el-button>
      <el-button type="primary"  @click="setOrderType(2)">年齡降序</el-button>
       <el-button type="primary"  @click="setOrderType(0)">原本順序</el-button>
    <h2>測試：v-for 遍歷對象</h2>
    <ul>
        <li v-for="(value,key) in persons[1]" :key="key">
            {{value}}---{{key}}
        </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
        searchname:'',
        orderType:0 , //0代表原本排序，1代表升序，2代表降序

      persons: [
        {
          name: "tom",
          age: 12,
          phone: [phone]
        },
        {
          name: "jack",
          age: 83,
          phone: [phone]
        },
        {
          name: "daata",
          age: 33,
          phone: [phone]
        },
        {
          name: "huawei",
          age: 56,
          phone: [phone]
        }
      ]
    };
  },
  methods: {
    deleteP(index) {
      this.persons.splice(index, 1);
    },
    edit(index, newP) {
      //   並沒有改變persons本身，數組內部發生了變化，但並沒有調用變異方法，vue不會更新界面
      //this.persons[index]=newP
      this.persons.splice(index,1,newP)
    },
    setOrderType(orderType){
this.orderType =orderType
    }
  },
  computed:{
filterpersons(){
    // 取出所有相關的數據
    const {searchname,persons,orderType} = this
    // 最終需要顯示的數組
    let fPersons;
    // 對persons進行過濾
fPersons= persons.filter(pp => pp.name.indexOf(searchname)!== -1)
// 排序
if(orderType !== 0){
    fPersons.sort(function(p1,p2){//如果返回為負數 
    if(orderType == 2){
 return p2.age - p1.age
    }else{
        return p1.age -p2.age
    }
       
    })
}
    return  fPersons
}
  }
};
</script>
<style lang="less">
</style>

效果：