条件渲染

@Conditional Rendering

根据条件渲染不同的内容

也可以使用动态类/开关类实现

更多信息，请访问条件渲染 - Conditional Rendering

v-if

控制 1个或多个DOM 的条件渲染：只有指令的表达式为真/返回真值才渲染DOM

检查元素，查看渲染情况

可以使用 v-else 或 v-else-if 实现多种条件的视图渲染

[] 根据加载数据长度相应的渲染页面；如果为0，提示当前数据为0；否则渲染数据

<div v-if="!list.length">列表为空</div>
<div v-else>
  <!-- 列表内容/渲染 -->
</div>

v-show

控制一个DOM 的条件显示

和 v-if 的不同之处在于：v-show 会在 DOM 渲染中保留该元素；v-show 仅切换了该元素上名为 display 的 CSS 属性

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要频繁切换，则使用 v-show 较好；如果在运行时绑定条件很少改变，则 v-if 会更合适

[] isAdult 为真，显示；为假，其 display 为 none

<div v-show="isAdult">18 year +</div>

v-if：解决渲染不渲染|有没有的问题；控制单个或多个元素

v-show：解决显示不显示的问题；控制单个元素

任何使用布尔值的地方都可以使用表达式实现

[] 分析以下场景，使用 v-if 还是 v-show；并通过开发工具调试数据变化时，页面的渲染情况

场景1：根据年龄 age，显示成年和未成年；

场景2：根据积分 credit，显示会员等级

Summary & Homework

Summary

v-if

v-show

Homework

[] 自动轮播 Swiper.vue

使用静态数据渲染诺干图片

如果图片分配的 ind 和轮播活动图片索引 imgInd 一致，则显示当前图片，否则隐藏

使用开发者工具查看并调试数据

后期使用列表渲染遍历图片数组

样式略

<div class="swiper-static">
  <img src="@/assets/swiper/swiper0.jpg" alt="" v-show="ind == 0">
  <img src="@/assets/swiper/swiper1.jpg" alt="" v-show="ind == 1">
  <img src="@/assets/swiper/swiper2.jpg" alt="" v-show="ind == 2">
  <img src="@/assets/swiper/swiper3.jpg" alt="" v-show="ind == 3">
  <img src="@/assets/swiper/swiper4.jpg" alt="" v-show="ind == 4">
  <img src="@/assets/swiper/swiper5.jpg" alt="" v-show="ind == 5">
  <img src="@/assets/swiper/swiper6.jpg" alt="" v-show="ind == 6">
</div>

import { ref } from 'vue';
const ind = ref(0);
let timer = setInterval(() => {
    ind.value = (ind.value + 1) % 7;
  }, 3000);

改进1：使用生命周期函数优化系统资源

import { ref, onMounted, onUnmounted } from 'vue';
onMounted(() => {
  timer = setInterval(() => {
    ind.value = (ind.value + 1) % 7;
  }, 3000);
})
onUnmounted(() => {
  timer && clearInterval(timer);
})

改进2：图片增加异常处理

<img src="@/assets/swiper/swiper0.jpg" alt="" v-show="ind == 0" @error="errImg">

const errImg = (event) => {
  console.error('Image failed to load:', event.target.src);
  event.target.src = '@/assets/logo.png';
};

[] 商品列表页 Goods.vue

1. 商品数据不为 0 时，渲染商品项组件 GoodsItem.vue

2. 购物车 Cart.vue：使用状态管理 - 仓库实现；如果购物车商品数量不为0，则显示购物车组件；否则不显示

<Cart class="cart" v-if="cartStore.cart.length" />

[] 登录页 LoginView.vue → 提示信息的显示与隐藏；实现请访问表单双向绑定