javascript - 在Vue.js中使用v-for渲染列表？

我正在尝试使用v-for呈现名称列表。我有一个名称数组，可以创建模板并在div中呈现名称。我想做的是，如果我在数据中添加了任何新对象，如何在新模板中从数据开始渲染该部分。因此，例如，直到名称“ michael”的所有内容都在一个div中呈现，但是如果我向数据添加新名称，则从那时起，名称应呈现在另一个模板中。
这是显示我的问题的CodePen

new Vue({
  el: '#app',
  data() {
    return {
      myArray: [{
          name: 'Sam',
          value: 'sam'
        },
        {
          name: 'Gary',
          value: 'gary'
        },
        {
          name: 'Smith',
          value: 'smith'
        },
        {
          name: 'Sunny',
          value: 'sunny'
        },
        {
          name: 'Michael',
          value: 'michael'
        }
      ]
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire" class="ml-4">
    <template>
      <div v-for="person in myArray" key="person.name">
        {{person.name}}
      </div>
    </template>
    <template>
      //New names should be rendered here from the new values added to the data?
    </template>
  </v-app>
</div>

任何帮助将不胜感激。我希望我已经解释了我的需要。如果没有让我知道。

最佳答案

你可以做这样的事情

<template>
  ...
  <v-app id="inspire" class="ml-4">
    <template>
       <!-- Names -->
      <div v-for="person in myArray1" key="person.name">
        {{person.name}}
      </div>
    </template>
    <template>
      <!-- New names -->
      <div v-for="person in myArray2" key="person.name">
        {{person.name}}
      </div>
    </template>
    <v-btn @click="addNewPerson">
      Add
    </v-btn>
  </v-app>
  ...
</template>
<script>
export default {
  ...
  data() {
    return {
      myArray: [{
          name: 'Sam',
          value: 'sam'
        },
        {
          name: 'Gary',
          value: 'gary'
        },
        {
          name: 'Smith',
          value: 'smith'
        },
        {
          name: 'Sunny',
          value: 'sunny'
        },
        {
          name: 'Michael',
          value: 'michael'
        }
      ]
    }
  },
  computed: {
    myArray1() {
      return this.myArray.filter(it => it.recent !== true)
    },
     myArray2() {
      return this.myArray.filter(it => it.recent === true)
    },
  },
  methods: {
    addNewPerson() {
      this.myArray.push({
        name: 'Michael 1',
        value: 'michael 2',
        recent: true // add this
      })
    }
  }
  ...
}
</script>