vue之列表渲染（v-for） 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<div id="demo">
  <h2>测试：v-for遍历数组</h2>
  <ul>
    <li v-for="(p,index) in persons" :key="index">
     {{index}}---{{p.name}}----{{p.age}}
      ---<button @click="deletePerson(index)">删除</button>
      ---<button @click="updateP(index,{name:'Cat',age:20})">更新</button>
    </li>
  </ul>


  <h2>测试：v-for遍历对象</h2>

  <ul>
    <li v-for="(value,key) in persons[1]" :key="key">
      {{value}}----{{key}}
    </li>
  </ul>
</div>

<script src="../js/vue.js"></script>
<script>
  new Vue({
    el: '#demo',
    data:{
      persons:[//vue本身只是监视了persons的改变，没有监视数组内部数据的变化
        {name:"Tom",age:18},
        {name:"Tom1",age:181},
        {name:"Tom2",age:182},
        {name:"Tom3",age:183},
      ]
    },
    methods:{
      deletePerson(index){
        this.persons.splice(index,1)
      },
      updateP(index,newP){
        // this.persons[index]=newP   //数组内部虽然变化了，但是并没有调用变异方法
        this.persons.splice(index,1,newP)
      }
    }
  })
</script>
</body>
</html>
posted @ 2021-07-11 22:42  King-DA  阅读(72)  评论(0)    收藏  举报