文章目录
一、代码
vue2类型写法
代码语言：javascript
复制<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类型写法
代码语言：javascript
复制<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>
二、展示
