Vue 3中的v-for指令是用来循环渲染数组或对象的，它可以在模板中快速的将数组或对象的数据渲染成视图。本文将从多个方面详细阐述Vue 3中v-for的使用方法。
一、Vue3中v-for循环数组
Vue3中v-for指令可以循环遍历一个数组，将数组中的每一个数据渲染到模板中。在循环中，我们可以用`v-for`指令的第二个参数`index`来获取当前循环的下标。
<div v-for="(item,index) in items" :key="index">
{{ index }} - {{ item }}
</div>
import { reactive } from 'vue';
export default {
setup() {
const items = reactive(['apple','banana','cherry','durian']);
return { items };
}
}
</script>
上面的代码中，我们先通过`reactive`定义了一个名为`items`的响应式数组，数组中包含了四个水果，然后在模板中使用`v-for`循环遍历数组。在循环中，我们可以通过`item`来获取数组中当前循环的值，通过`index`来获取当前循环的下标，最后将下标和数组中的值渲染到模板中。注意，在循环中需要设置`key`属性来保证循环的正确性。
二、Vue3中v-for循环不了reactive
在Vue3中，由于reactive是一个函数，所以我们不能使用v-for指令对它进行循环遍历，如果想要循环遍历reactive，可以先将其通过`toRefs`解构成一个普通的对象，然后再进行循环遍历。
<template>
<div v-for="(item,key) in data" :key="key">
{{key}} -- {{item}}
</div>
</template>
<script>
import { ref, reactive, toRefs } from 'vue';
export default {
setup() {
const state = reactive({ count: 0 });
const data = toRefs(state);
return { data };
}
}
</script>
在上面的代码中，我们创建了一个reactive对象`state`，然后使用`toRefs`函数将其解构成一个普通的对象`data`，最后在模板中使用`v-for`循环遍历`data`，并将每一个数据渲染到视图中。
三、Vue3中v-for拿到子组件实例
在Vue3中，我们可以通过`v-for`指令将一个数组的数据循环渲染到多个子组件中，并且可以在子组件中访问到对应的数据。为了方便说明，我们这里以一个简单的计数器组件为例：
// Counter.vue
<template>
<div>
<button @click="increment">+</button>
{{ count }}
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
setup() {
const state = reactive({ count: 0 });
const increment = () => state.count++;
return { ...state, increment };
}
}
</script>
// App.vue
<template>
<div v-for="(item,index) in items" :key="index">
<Counter :count="item" :key="index"></Counter>
</div>
</template>
<script>
import Counter from './Counter.vue'
import { reactive } from 'vue';
export default {
components: { Counter },
setup() {
const items = reactive([1, 2, 3, 4]);
return { items };
}
}
</script>
在上面的代码中，我们通过`v-for`指令将一个数组`items`循环渲染到了Counter组件中，并且将循环的每一个值都通过props的形式传递给了Counter组件。Counter组件内部通过`props`获取到了数组中当前循环的值，并将其渲染到视图中。由于每次循环都会创建一个新的Counter组件实例，因此我们需要设置`key`属性来保证循环的正确性。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/270189.html
微信扫一扫 
支付宝扫一扫 