vue 列表渲染

<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:15896589635})">修改</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: 15926558969
        },
        {
          name: "jack",
          age: 23,
          phone: 15926558969
        },
        {
          name: "daata",
          age: 33,
          phone: 15926558969
        },
        {
          name: "huawei",
          age: 56,
          phone: 15926558969
        }
      ]
    };
  },
  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>