Vue3基础之v-if条件与 v-for循环

简介: Vue3基础之v-if条件与 v-for循环

条件渲染

v-if、v-else-if、v-else

基本使用

v-if 指令用于根据表达式的真假来条件性地渲染元素,而 v-else-ifv-else 则用于添加额外的条件分支。

<template>
  <div>
    <p v-if="type === 'A'">Type A</p>
    <p v-else-if="type === 'B'">Type B</p>
    <p v-else>Type C</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const type = ref('B');
</script>

注意: v-else 元素必须跟在一个 v-if 或者 v-else-if 元素后面,v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

使用 <template> 包裹多个元素

如果需要条件渲染多个元素,可以使用 <template> 包裹它们。

<template>
  <div>
    <template v-if="type === 'A'">
      <p>Content for Type A</p>
      <span>Another element for Type A</span>
    </template>
    <template v-else-if="type === 'B'">
      <p>Content for Type B</p>
    </template>
    <template v-else>
      <p>Default Content</p>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const type = ref('C');
</script>

v-ifv-show 的区别

v-show 也是用于条件性地显示或隐藏元素,但与 v-if 有一些不同。

  • v-if 是真正的条件渲染,当条件为 false 时,元素不会被渲染到 DOM 结构中。而 v-show 只是通过 CSS 控制元素的显示与隐藏,当条件为 false 时,元素仍然在 DOM 中存在,只是被设置为不可见。
  • v-if 适用于在运行时条件不经常改变的情况,因为它会在条件变为 true 时添加或移除元素,造成 DOM 操作。而 v-show 适用于频繁切换显示和隐藏的情况,因为它只是简单地切换元素的样式。
<template>
  <div>
    <p v-if="showElement">This is rendered with v-if</p>
    <p v-show="showElement">This is rendered with v-show</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const showElement = ref(true)
</script>

在上述例子中,两个段落都会在初始渲染时显示,但通过修改 showElement 的值,你可以看到 v-if 会完全移除元素,而 v-show 只是切换了元素的可见性。

如何选择

  • 如果你的元素在应用的生命周期中只会被渲染一次或很少改变,使用 v-if 可能更合适,因为它在条件为 false 时会从 DOM 中移除元素,减少了 DOM 操作的频率。
  • 如果你的元素需要频繁地显示和隐藏,条件经常变化,可以考虑使用 v-show,因为它不会在条件为 false 时从 DOM 中移除元素,减少了频繁的 DOM 操作。

v-for

v-for 是 Vue 中用于循环渲染元素的指令。它可以用于遍历数组或对象,并为每个元素执行一段模板代码,生成重复的 HTML 结构。

基本用法

遍历数组

<template>
  <div>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3']
    };
  }
};
</script>

在上述例子中,v-for 指令遍历 items 数组中的每个元素,并为每个元素渲染一个 <li> 元素。

获取索引值

你也可以通过 (item, index) 的语法获取索引值。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items">{{ index + 1 }}. {{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
const data = reactive({
items: ['Item 1', 'Item 2', 'Item 3']
})
</script>

遍历对象

除了数组,v-for 也可以用于遍历对象的属性。

<template>
  <div>
    <ul>
      <li v-for="(value, key) in data.user">{{ key }}: {{ value }}</li>
    </ul>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const data = reactive({
user:{
 name: 'John',
 age: 25,
 occupation: 'Developer'
}
})

</script>

在上述例子中,v-for 遍历 user 对象的每个属性,为每个属性渲染一个 <li> 元素。

v-for 的特殊用法

遍历数字范围

你可以使用 v-for 遍历一个数字范围。

<template>
  <div>
    <ul>
      <li v-for="n in 5">{{ n }}</li>
    </ul>
  </div>
</template>

在上述例子中,v-for 会渲染 1 到 5 的数字。

遍历具有特定条件的数组

你可以使用 v-for 遍历具有特定条件的数组。

<template>
  <div>
    <ul>
      <li v-for="item in items.lists" v-if="item.startsWith('Item')">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
import { reactive } from 'vue';
const items = reactive({
  lists:['Item 1', 'Item 2', 'Item 3']
  })
</script>

在上述例子中,v-for 遍历 items 数组,但只渲染满足特定条件(以 'Item' 开头)的元素。

v-forkey

在使用 v-for 遍历元素时,通常需要为每个迭代的元素指定一个唯一的 key 属性,以便 Vue 能够更高效地更新 DOM。key 应当是每个元素都唯一且稳定的标识符。

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items.lists" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup>
  import { reactive } from 'vue';
  const items = reactive({
  lists:['Item 1', 'Item 2', 'Item 3']
  })
})
</script>

在上述例子中,:key="index" 为每个 <li> 元素指定了一个唯一的 key,通常使用索引作为 key,但在一些特定情况下,可能需要根据具体的数据结构来选择合适的 key。

v-for与v-if

官网说不推荐同时使用

目录
相关文章
|
3天前
|
资源调度 JavaScript 前端开发
vite+vue3+ts从0到1搭建企业级项目(2)
vite+vue3+ts从0到1搭建企业级项目
15 1
|
3天前
|
开发工具 git
vite+vue3+ts从0到1搭建企业级项目(4)
vite+vue3+ts从0到1搭建企业级项目
23 0
|
3天前
|
存储 JavaScript API
vite+vue3+ts从0到1搭建企业级项目(3)
vite+vue3+ts从0到1搭建企业级项目
16 0
|
3天前
|
资源调度 JavaScript 测试技术
vite+vue3+ts从0到1搭建企业级项目(1)
vite+vue3+ts从0到1搭建企业级项目
34 0
|
5天前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
62 7
使用 Vue CLI 脚手架生成 Vue 项目
|
3天前
|
JavaScript
|
4天前
|
存储 JavaScript API
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
Vue状态管理深度剖析:Vuex vs Pinia —— 从原理到实践的全面对比
11 2
|
7天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
7天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
20 1
|
8天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
16 3