【愚公系列】2021年12月 VUE3-循环v-for

愚公搬代码

发布于 2022-12-01 01:10:49

19000

代码可运行

文章被收录于专栏：历史专栏历史专栏

运行总次数：0

代码可运行

文章目录

一、代码

vue2类型写法

<template>
  <ul>
    <!-- 普通循环 -->
    <li v-for="value in arr">{{ value }}</li>
    <!-- 健值循环 -->
    <!-- key指定唯一性 -->
    <li v-for="(item, index) in users" :key="index">
      {{ index + 1 }}---{{ item.id }} {{ item.name }} {{ item.age }}
    </li>
  </ul>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      arr: [12, 4, 5, 34, 2, 11],
      users: [
        {
          id: 9527,
          name: "唐伯虎",
          age: 25,
        },
        {
          id: 1001,
          name: "秋香",
          age: 22,
        },
        {
          id: 1002,
          name: "石榴姐",
          age: 24,
        },
      ],
    };
  },
};
</script>

vue3类型写法

<template>
  <ul>
    <!-- 普通循环 -->
    <li v-for="value in arr">{{ value }}</li>
    <!-- 健值循环 -->
    <!-- key指定唯一性 -->
    <li v-for="(item, index) in users" :key="index">
      {{ index + 1 }}---{{ item.id }} {{ item.name }} {{ item.age }}
    </li>
  </ul>
</template>
<script>
import {
  reactive,
  toRefs,
} from "vue";

export default {
  setup() {
    const data = reactive({
      arr: [12, 4, 5, 34, 2, 11],
      users: [
        {
          id: 9527,
          name: "唐伯虎",
          age: 25,
        },
        {
          id: 1001,
          name: "秋香",
          age: 22,
        },
        {
          id: 1002,
          name: "石榴姐",
          age: 24,
        },
      ],
    });
    
    return {...toRefs(data)};
  },
};
</script>