列表渲染

@List Rendering

使用 for - in 渲染一个基于一个数组的列表 - render a list of items based on an array

更多信息，请访问列表渲染 - List Rendering

需显式的指定特殊属性 - key 以区分并跟踪每个节点

指定 key 有助于提高渲染性能；据说数据变化时只会渲染更新的数据项，不会全部重新渲染

Array

items 是源数据的数组

item 是迭代项/别名；可以是任意合法标识符

index 当前项的位置索引；可以是任意合法标识符；可选

<div v-for="(item, index) in items">
  //
</div>

用法1：仅使用迭代数据项别名 item

<ul>
    <li v-for = "item in list" :key = "item.id" > {{ item }} </li>
</ul>

用法2：同时使用数据元素对应的索引 index；使用括号()

<ul>
    <li v-for = "(item, index) in list" :key = "item.id" > {{ item }} </li>
</ul>

用法3：嵌套使用；每个循环都使用独立的迭代变量；因为块级作用域，可以重名；但是不建议

<ul>
    <li v-for = "(item, ind) in list" :key = "item.id" >
        <p v-for = "innerItem in item" :key = "innerItem.id" > {{ innerItem }} </p>
    </li>
</ul>

Object

遍历一个对象的所有属性；默认显示对象的属性值

遍历的顺序会基于对该对象调用 Object.keys() 的返回值来决定

const obj = reactive({ id: 101, name: 'glpla', age: 18 })

.1个参数：表示值 value

<div v-for = "value in obj" > {{ value }} </div>

.2个参数：第一个为值 value；第二个为键 key

<div v-for = "(value, key) in obj" > {{ key }}:{{ value }} </div>

.3个参数：第一个为值 value；第二个为键 key；第三个为索引 index

<div v-for = "(value, key, index) in obj" > {{ index }}:{{ key }}:{{ value }} </div>

每个位置的参数代表特定的属性，如果不相使用某个参数，可以使用非标准语法 _ 表示；多个可以使用数字区分

也可以考虑使用对象的静态方法 Object.keys 或 Object.entries 来遍历对象

可读性角度出发，不建议省略；你不用它就完事了呗

<div v-for = "(_, key) in obj" > {{ key }} </div>

<div v-for = "(_1, _2, index) in obj" > {{ index }} </div>

<template>

不推荐同时使用 v-if 和 v-for：二者优先级不明显

为区分结构，合理使用逻辑，特别是组合使用 v-for 和 v-if 时，可以使用 <template>；是一个不可见的包装器元素，最后渲染的结果并不会包含这个 <template> 元素

const list = ref(['home', 'product', 'about'])
const isOn = ref(true)

<template v-if = "isOn" >
    <div v-for = "item in list" > {{ item }} </div>
</template>

可以在 <template> 标签上使用 v-for 来渲染一个包含多个元素的块

可以直接在组件上使用 v-for，和在一般的元素上使用没有区别

Summary & Homework

Summary

v-for

key的运用

使用 <template> 处理条件渲染和列表渲染

Homework

[] 使用列表循环优化类 class 中的导航/标签页 TabCard 案例

<template>：使用列表循环、内容绑定、属性绑定

<div class="test">
  <div class="btn" :class="{ 'active': ind == index }" @click="ind = index" 
    v-for="(item, index) in navs"
    :key="index">{{ item }}
  </div>
</div>

import { ref, watchEffect } from 'vue'
const ind = ref(0)
const navs = ref(['Lorem.', 'Labore!', 'Quos.', 'Doloremque.'])

[] 自动轮播 Swiper.vue

使用列表渲染遍历本地图片数组，如果图片分配的 ind 和轮播活动图片索引 currentInd 一致，则显示当前图片，否则隐藏

使用数字指示器

样式略

请使用第三方 swiper.js 实现

<div class="swiper">
  <img :src="item" alt="" 
    v-for="(item, ind) in imgsUrl" :key="ind" 
    v-show="currentInd === ind">
  <div class="indictator">
    <span class="dot" :class="{ active: currentInd === ind }" 
    v-for="(item, ind) in imgsUrl" :key="ind">{{ ind + 1 }}</span>
  </div>
</div>

import { ref, computed, onMounted, onUnmounted } from 'vue';
const imgs = ref(['coffee0.jpg', 'coffee1.jpg', 'coffee2.jpg', 'coffee3.jpg', 'coffee4.jpg'])
const currentInd = ref(0)
let timer = null
let duration = 3000
const imgsUrl = computed(() => {
  return imgs.value.map(img => new URL(`../assets/imgs/${img}`, import.meta.url).href)
})
onMounted(() => {
  timer = setInterval(() => {
    currentInd.value++
    currentInd.value = currentInd.value % imgsUrl.value.length
  }, duration)
})
onUnmounted(() => {
  timer && clearInterval(timer)
})

[] 商品列表页 Goods.vue

列表渲染获取的商品数据，渲染多个商品项

封装组件 GoodsItem.vue 实现

<div class="goods">
  <template v-if="goodsStore.goods.length">
    <GoodsItem v-for="(item, ind) in goodsStore.goods" :key="item.id" :product="item" />
    <footer class="f-s-s">我是有底线的~</footer>
  </template>
  <div v-else>商品获取失败，请刷新页面</div>
</div>

后续使用组件属性传参 defineProps()

[] 商城视图 MallView.vue - 动态处理图片资源

处理 assets 中的图片，动态生成 url 便于列表渲染

<div class="item" v-for="item in linksUrl">
  <img :src="item.src" alt="">
  <p>{{ item.title }}</p>
</div>

const links = ref([
  {
    id: 1,
    title: '冻干咖啡',
    src: 'm0.png'
  },
  {
    id: 2,
    title: '挂耳咖啡',
    src: 'm1.png'
  }, {
    id: 3,
    title: '咖啡液',
    src: 'm2.png'
  }, {
    id: 4,
    title: '咖啡豆',
    src: 'm3.png'
  }, {
    id: 5,
    title: '胶囊咖啡',
    src: 'm4.png'
  }
])

const linksUrl = computed(() => {
  return links.value.map(item => ({
    ...item,
    src: new URL(`../assets/${item.src}`, import.meta.url).href
  }))
})

[] 异步组件 → 标签页 - 仅使用对象的 key

<button v-for="(_, tab) in tabs" @click="currentTab = tab" :key="tab"
:class="['tab-button', { active: currentTab === tab }]">{{ tab }}</button>

<component :is="tabs[currentTab]" class="tab"></component>

const tabs = {
  "随享瑞幸": AsyncGoods,
  "颜值水杯": AsyncCup
}