前端Vue学习笔记（二）

重点：splice() filter() sort() indexOf()

<template>
  <div>
    <input type="text" v-model="searchP">
  <ul>
    <li v-for="(person,index) in filterPersons" :key="index">
      {{index}}---{{person.name}}--{{person.age}}
      <button @click="deleteP(index)">删除</button>
      <button @click="updateP(index,{'name':'dage',age:12})">更新</button>
    </li>
  </ul>
    <button @click="setOrderType(1)">升序</button>
    <button @click="setOrderType(2)">降序</button>
    <button @click="setOrderType(0)">原来排序</button>
  </div>
</template>

<script>
    export default {
        name: "testTwo",
      data(){
          return{
            searchP:'',
            orderType:0,
          persons:[{
            name:'kai',
            age:8
          },{
            name:'kenan',
            age:44
          },{
            name:'fanzhang',
            age:90
          },{
            name:'libai',
            age:34
          }]
      }
      },
      methods:{
          deleteP(index){
            this.persons.splice(index,1)
          },
        updateP(index,person){
            this.persons.splice(index,1,person)
        },
        setOrderType(value){
            this.orderType = value;
        }
      },
      computed:{
        filterPersons(){
          const {searchP,persons,orderType} = this;
          let filterPP =persons.filter(p=>p.name.indexOf(searchP)>=0)
          if (orderType!==0){
            filterPP.sort(function (p1,p2) {
              //1是升序  2是降序
              if (orderType===1){
                return p1.age-p2.age;
              }else {
                return p2.age-p1.age;
              }
            })
          }
          return filterPP;
        }
      }
    }
</script>

<style scoped>

</style>