如何在for循环的每次迭代中将HTML标记中的值传递给Vue的数据对象

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

new Vue({
  el: '#app',
  data: {
    values: [] // 用于存储每次迭代中的值
  }
});

<div id="app">
  <ul>
    <li v-for="value in values" v-bind:key="value">{{ value }}</li>
  </ul>
</div>

new Vue({
  el: '#app',
  data: {
    values: [] // 用于存储每次迭代中的值
  },
  methods: {
    fetchData() {
      // 模拟异步请求数据
      setTimeout(() => {
        // 假设获得的数据是一个数组
        const newData = ['value1', 'value2', 'value3'];
        this.values = newData; // 更新数据对象中的值
      }, 1000);
    }
  },
  mounted() {
    this.fetchData(); // 在mounted钩子函数中调用方法获取数据
  }
});