Vue3列表渲染 - 07

1. v-for 的普通使用

    <ul>
      <li v-for="(num, index) in rank" :key="index">
        {
  { num }} -- {
  { index + 1 }}
      </li>
    </ul>

const rank = ref(["第一名", "第二名", "第三名"]);

与vue2的 v-if 使用方法一致

2. v-for 多参数遍历使用

    <ul>
      <li v-for="(a, b, c, index) in table" :key="index">
        {
  { a }} -- {
  { b }} -- {
  { c }}
        <!-- a:value -->
        <!-- b:key -->
        <!-- c:index -->
      </li>
    </ul>

const table = reactive({
  id: "001",
  name: "小明",
  age: "18",
});