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>

效果：