vue_v-for_遍历数组_遍历对象

Posted 2021-02-09 tianxiaxuange

1. v-for 遍历数组

html

• <div id="test">
      <ul>
          <li v-for="(p, index) in persons" :key="index">
              {{p.name}}
              {{p.age}}<br />
              <button @click="deleteP(idnex)">删除 - 变异方法：vue 监测数组的相关方法</button><br />
              <button @click="updateP(index, {name: "kjf", age:18})">更新 - 重写增加了界面更新 push/pop/splice/sort/reverse/shift/unshift</button>
          </li>
      </ul>
  </div>

js

• new Vue({
      el: "#test",
      data:{
           persons:[
               {name: "Tom", age: 14},
               {name: "Jack", age: 17},
               {name: "Rose", age: 15},
               {name: "Jerry", age: 18},
               {name: "Kate", age: 16}
           ]
      },
      methods:{
          deleteP(index){
              this.persons.splice(index, 1)
          }
          updateP(index, newP){
              this.persons.splice(index, 1, newP)
          }
      }
  })

 

2. v-for 遍历对象

html

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