Vue.js 3 使用 v-for 创建动态列表并展示平方值

<template>
  <div>
    <div v-for='(num, index) in squares' :key='index'>
      {{ num }}
    </div>
  </div>
</template>
<script>
export default {
  computed: {
    squares() {
      return Array.from({ length: 10 }, (_, index) => Math.pow(index, 2));
    },
  },
};
</script>
<p>在上面的代码中，我们使用了 v-for 指令来循环创建 div 列表，列表中的每个 div 都会显示计算属性 squares 中对应序号的平方值。在计算属性中，我们使用了 Array.from 方法来创建一个长度为 10 的数组，然后通过箭头函数和 Math.pow 方法来计算每个元素的平方值。最后，我们将计算出的结果返回作为计算属性的值。</p>