vue3：条件和列表渲染

掘金7号
98 阅读4分钟

条件和列表渲染

条件渲染

Vue 中为条件渲染提供了一组内置的指令：

  • v-if
  • v-else
  • v-else-if
<template>
  <div v-if="type === 1">晴天</div>
  <div v-else-if="type === 2">阴天</div>
  <div v-else-if="type === 3">雨天</div>
  <div v-else-if="type === 4">下雪</div>
  <div v-else>不知道什么天气</div>
</template>

<script setup>
import { ref } from 'vue'
const type = ref(1)
setInterval(() => {
  type.value = Math.floor(Math.random() * 5 + 1)
}, 3000)
</script>

<style scoped></style>

如果是要切换多个元素，那么可以将多个元素包裹在 template 的标签里面，该标签是不会渲染的。

<template>
  <template v-if="type === 1">
    <div>晴天</div>
    <p>要出去旅游</p>
    <p>玩的开心</p>
  </template>
  <template v-else-if="type === 2">
    <div>阴天</div>
    <p>呆在家里吧</p>
    <p>好好看一本书</p>
  </template>
  <template v-else-if="type === 3">
    <div>雨天</div>
    <p>阴天适合睡觉</p>
    <p>好好睡一觉吧</p>
  </template>
  <template v-else-if="type === 4">
    <div>下雪</div>
    <p>下雪啦，我们出去堆雪人吧</p>
    <p>下雪啦，我们出去打雪仗吧</p>
  </template>
  <div v-else>不知道什么天气</div>
</template>

<script setup>
import { ref } from 'vue'
const type = ref(1)
setInterval(() => {
  type.value = Math.floor(Math.random() * 5 + 1)
}, 3000)
</script>

<style scoped></style>

另外，关于条件渲染，还有一个常用指令：v-show

v-show 的切换靠的是 CSS 的 display 属性，当值为 false 的时候，会将 display 属性设置为 none.

<template>
  <div v-if="isShow">使用 v-if 来做条件渲染</div>
  <div v-show="isShow">使用 v-show 来做条件渲染</div>
</template>

<script setup>
import { ref } from 'vue'
const isShow = ref(true)
setTimeout(() => {
  isShow.value = false
}, 2000)
</script>

<style scoped></style>

v-if 和 v-show 区别

v-if 是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。

v-if 也是惰性的：如果在初次渲染时条件值为 false，则不会做任何事。条件区块只有当条件首次变为 true 时才被渲染。

相比之下，v-show 简单许多，元素无论初始条件如何，始终会被渲染，只有 CSS display 属性会被切换。

总的来说：

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

列表渲染

这里涉及到的就是循环，Vue 也提供了一个内置指令：v-for

v-for 指令使用的语法是 item in items 的形式，items 源数据的数组，item 代表的是从 items 取出来的每一项，有点类似于 JS 中的 for..of 循环。

<template>
  <div>
    <h2>商品列表</h2>
    <ul>
      <li v-for="(product, index) in products" :key="index">
        {{ index + 1 }}{{ product.name }} - {{ product.price }}
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const products = ref([
  { name: '键盘', price: 99.99 },
  { name: '鼠标', price: 59.99 },
  { name: '显示器', price: 299.99 }
])
</script>

<style scoped></style>

一般来讲，在使用 v-for 循环的时候，我们会给元素指定一个 key 属性。key 属性主要是用于 优化虚拟DOM的渲染性能 的，相当于是给虚拟 DOM 元素一个唯一性标识。当对 key 进行绑定的时候，期望所绑定的值为一个基础类型的值（string、number），不要使用对象来作为 v-for 的 key.

使用 v-for 循环渲染的时候也可以使用 template 来循环多个元素，此时 key 就挂在 template 标签上面。（vue2不能挂载template上，可以挂载到其子元素上）

<template>
  <div>
    <h2>商品列表</h2>
    <template v-for="(product, index) in products" :key="index">
      <div>{{ index + 1 }}</div>
      <div>{{ product.name }}</div>
      <div>{{ product.price }}</div>
      <hr />
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const products = ref([
  { name: '键盘', price: 99.99 },
  { name: '鼠标', price: 59.99 },
  { name: '显示器', price: 299.99 }
])
</script>

<style scoped></style>

关于v-for一些细节

  1. v-for 是可以遍历对象的，遍历对象的时候，第一个值是对象的值，第二值是对象的键，第三个值是索引
<template>
  <div v-for="(value, key, index) in stu" :key="index">
   {{ index }} - {{ key }} - {{ value }}
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const stu = reactive({
  name: 'zhangsan',
  age: 18,
  gender: 'male',
  score: 100
})
</script>

<style scoped></style>
  1. v-for 还可以接收一个整数值 n，整数值会从 1....n 进行遍历
<template>
  <div v-for="(value, index) in 10" :key="index">
    {{ value }}
  </div>
</template>

<script setup></script>

<style scoped></style>
  1. v-for 也是存在作用域的，作用域的工作方式和 JS 中的作用域工作方式类似
const parentMessage = 'Parent'
const items = [
  /* ... */
]

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

<template>
  <ul>
    <li v-for="project in projects" :key="project.id">
      <h2>{{ project.name }}</h2>
      <ul>
        <li v-for="task in project.tasks" :key="task.id">
          <h3>{{ task.name }}</h3>
          <ul>
            <li v-for="(subtask, index) in task.subtasks" :key="index">
              {{ project.name }}- {{ task.name }} - {{ subtask }}
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue'
const projects = ref([
  {
    id: 1,
    name: 'Project A',
    tasks: [
      {
        id: 1,
        name: 'Task A1',
        subtasks: ['Subtask A1.1', 'Subtask A1.2']
      },
      {
        id: 2,
        name: 'Task A2',
        subtasks: ['Subtask A2.1', 'Subtask A2.2']
      }
    ]
  },
  {
    id: 2,
    name: 'Project B',
    tasks: [
      {
        id: 1,
        name: 'Task B1',
        subtasks: ['Subtask B1.1', 'Subtask B1.2']
      },
      {
        id: 2,
        name: 'Task B2',
        subtasks: ['Subtask B2.1', 'Subtask B2.2']
      }
    ]
  }
])
</script>

<style scoped></style>
  1. 官方有这么一句话：不要同时使用 v-if 和 v-for，因为两者优先级不明显

这里官方所谓的同时使用，指的是不要在一个元素上面同时使用：

<!--
 这会抛出一个错误，因为属性 todo 此时
 没有在该实例上定义
-->
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo.name }}
</li>

上面的例子，在同一个元素上面，既使用了 v-for 又使用了 v-if，这种方式是容易出问题的。

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

在外新包装一层 template，这样可以满足上面的需求的同时代码也更加易读。

数组的侦测

数组的方法整体分为两大类：

  • 变更方法：调用这些方法时会对原来的数组进行变更
    • push
    • pop
    • shift
    • unshift
    • splice
    • sort
    • reverse
  • 非变更方法：调用这些方法不会对原来的数组进行变更，而是会返回一个新的数组
    • filter
    • concat
    • slice
    • map

针对变更方法，数组只要一更新，就会触发它的响应式，页面会重新渲染

setTimeout(() => {
  projects.value.push({
    id: 3,
    name: '这是一个大项目',
    tasks: [
      {
        id: 1,
        name: '搭建工程',
        subtasks: ['🧵调研框架', '熟悉框架']
      },
      {
        id: 2,
        name: '分解模块',
        subtasks: ['先调研', '分析']
      }
    ]
  })
}, 3000)

如果是非变更方法，那么需要使用方法的返回值去替换原来的值：

// `items` 是一个数组的 ref
items.value = items.value.filter((item) => item.message.match(/Foo/))

官方文档：条件渲染 | Vue.js

-EOF-

avatar
文章
阅读
粉丝