Vue3中的模板指令——列表渲染指令v-for

最新推荐文章于 2024-08-30 16:13:36 发布

南腔北调-pilmar

最新推荐文章于 2024-08-30 16:13:36 发布

阅读量347

点赞数 3

分类专栏： # Web前端开发基础文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ningbw2000/article/details/139493056

版权

本文详细介绍了Vue3中的列表渲染指令v-for，包括遍历数组和对象，模板标签使用，直接应用在组件上，渲染策略，v-for与v-if的配合，以及Vue如何监听数组变化。同时，讨论了在v-for操作中应如何处理原数组的变更方法，以确保数据的响应式更新。

摘要由CSDN通过智能技术生成

4.6.2 列表渲染指令v-for

v-for指令相当于根据组件实例中的数组数据来批量渲染生成大量的新的li数据标签，其遍历形式如下：

4.6.2.1 遍历数组

items为组件实例属性，item为遍历数据对象，index为数据索引，

item in items或item of items或(item,index) in items 或{} in items或({},index) in items

const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

// 数组遍历，item为数组中的对象
<li v-for="item in items">
  {
  { item.message }}
</li>

const parentMessage = ref('Parent')
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])

// 数组中的对象解构赋值遍历
<li v-for="(item, index) in items">
  {
  { parentMessage }} - {
  { index }} - {
  { item.message }}
</li>

// 本示例说明：v-for中变量的作用域同JavaScript代码中的作用域
const parentMessage = 'Parent'
const items = [
  /* ... */
]

items.forEach((item, index) => {
  // 可以访问外层的 `parentMessage`
  // 而 `item` 和 `index` 只在这个作用域可用
  console.log(parentMessage, item.message, index)
})

// 数组中的对象部分解构赋值遍历
<li v-for="{ message } in items">
  {
  { message }}
</li>

<!-- 有 index 索引时 -->
<li v-for="({ message }, index) in items">
  {
  { message }} {
  { index }}
</li>i>

// v-for嵌套遍历
<li v-for&#