用v-for 迭代指令写出 1-10的无序表

Question

用v-for 迭代指令写出 1-10的无序表？ 求答案！

用v-for 迭代指令写出 1-10的无序表

Answer 1

解决方法

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<ul id="array-rendering">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

Vue.createApp({
  data() {
    return {
      items: [
                 { message: '1' }, 
        { message: '2' },
        { message: '3' },
        { message: '4' },
        { message: '5' },
        { message: '6' },
        { message: '7' },
        { message: '8' },
        { message: '9' },
        { message: '10' }

      ]
    }
  }
}).mount('#array-rendering')

输出为：

参考：

列表渲染 | Vue.js Vue.js - The 渐进式 JavaScript 框架 https://v3.cn.vuejs.org/guide/list.html#%E7%94%A8-v-for-%E6%8A%8A%E4%B8%80%E4%B8%AA%E6%95%B0%E7%BB%84%E6%98%A0%E5%B0%84%E4%B8%BA%E4%B8%80%E7%BB%84%E5%85%83%E7%B4%A0

---

如有问题及时沟通