「Vue3系列」Vue3 条件语句/循环语句

本文涉及的产品
注册配置 MSE Nacos/ZooKeeper,118元/月
可观测链路 OpenTelemetry 版,每月50GB免费额度
可观测监控 Prometheus 版,每月50GB免费额度
简介: 在 Vue 3 中,你可以使用条件语句来动态地控制模板中的渲染内容。Vue 提供了多种方式来实现条件渲染,包括 `v-if`、`v-else-if`、`v-else` 和 `v-show` 指令。

一、Vue3 条件语句

在 Vue 3 中,你可以使用条件语句来动态地控制模板中的渲染内容。Vue 提供了多种方式来实现条件渲染,包括 v-ifv-else-ifv-elsev-show 指令。

1. v-if

v-if 指令用于根据条件来渲染一个元素或组件。如果条件为真,元素或组件会被渲染到 DOM 中;如果条件为假,元素或组件不会被渲染。

<template>
  <div>
    <p v-if="isVisible">这段文字将会显示</p>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      isVisible: true
    };
  }
};
</script>

在这个例子中,isVisible 是一个布尔值,当它为 true 时,<p> 元素会被渲染到 DOM 中;当它为 false 时,<p> 元素不会被渲染。

2. v-else-if 和 v-else

你可以使用 v-else-ifv-else 来添加额外的条件。

<template>
  <div>
    <p v-if="score > 90">优秀</p>
    <p v-else-if="score > 60">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      score: 80
    };
  }
};
</script>

在这个例子中,根据 score 的值,不同的 <p> 元素会被渲染。

3. v-show

v-show 指令与 v-if 类似,但它不会基于条件来添加或移除元素,而是简单地切换元素的 CSS 的 display 属性。这意味着即使元素被隐藏,它仍然会保留在 DOM 中。

<template>
  <div>
    <p v-show="isVisible">这段文字将会根据条件显示或隐藏</p>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      isVisible: false
    };
  }
};
</script>

在这个例子中,当 isVisibletrue 时,<p> 元素会显示;当为 false 时,<p> 元素会被隐藏,但它的 DOM 元素仍然存在。

4. 使用计算属性进行条件渲染

对于更复杂的条件逻辑,你可以使用计算属性来返回一个布尔值,并在模板中使用这个布尔值来决定是否渲染某个元素。

<template>
  <div>
    <p v-if="shouldShowMessage">这是一个消息</p>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      userLevel: 2
    };
  },
  computed: {
    
    shouldShowMessage() {
    
      return this.userLevel >= 2;
    }
  }
};
</script>

在这个例子中,shouldShowMessage 是一个计算属性,它返回一个布尔值,表示是否应该显示消息。

5. v-if与v-show比较

在 Vue 3 中,v-ifv-show 都用于条件性地渲染元素,但它们在实现方式和性能上有一些区别。

v-if

v-if 是一个“真正的”条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

特点:

  • 条件为假时,不会渲染元素到 DOM 中。
  • 每次条件改变都会销毁和重建元素及其子组件,包括所有的事件监听器。
  • 条件为假时,不会有任何性能开销,因为 DOM 中没有对应的元素。
  • 更加适合不频繁切换的条件渲染。

v-show

v-show 就简单得多——不论初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

特点:

  • 无论条件真假,元素都会被渲染到 DOM 中。
  • 条件为假时,通过 CSS 设置 display 属性为 none 来隐藏元素。
  • 条件改变时,元素只是简单地从可见变为不可见,不会有销毁和重建的开销。
  • 适合频繁切换的条件渲染。

性能考虑

如果你非常关心性能,并且条件不频繁切换,使用 v-if 会更好,因为这样可以避免不必要的渲染和销毁/重建的开销。然而,如果条件频繁切换,使用 v-show 会更好,因为它只是简单地切换 CSS 属性,而不会涉及组件的销毁和重建。

使用场景

  • 如果一个元素需要非常频繁地切换,使用 v-show 会更好。
  • 如果在运行时条件不太可能改变,或者元素非常重(有很多子组件或监听器),使用 v-if 更好。

在实际应用中,可以根据具体的需求来选择使用 v-if 还是 v-show。在大多数情况下,Vue 的优化足以让这两种方式在性能上相差无几,因此选择哪种方式更多是基于代码的可读性和维护性的考虑。

二、Vue3 循环语句

在 Vue.js 中,你可以使用 v-for 指令来执行循环操作,遍历数组或对象,并基于每个元素或属性渲染一个模板块。

1. 遍历数组

使用 v-for 指令遍历数组时,你可以指定一个别名来代表当前元素,并使用 in 关键字来指定要遍历的数组。

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">
        {
  { item.text }}
      </li>
    </ul>
  </div>
</template>

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

在这个例子中,items 是一个包含对象的数组,我们使用 v-for="item in items" 来遍历这个数组,并为每个对象渲染一个 <li> 元素。:key="item.id" 是用来跟踪每个节点的身份,从而重用和重新排序现有元素。

2. 遍历对象

你也可以使用 v-for 来遍历对象的属性。

<template>
  <div>
    <ul>
      <li v-for="(value, name, index) in object" :key="index">
        {
  { name }}: {
  { value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
    
  data() {
    
    return {
    
      object: {
    
        firstName: 'John',
        lastName: 'Doe',
        age: 30
      }
    };
  }
};
</script>

在这个例子中,object 是一个包含属性的对象。v-for="(value, name, index) in object" 遍历这个对象的每个属性,并输出属性的名称和值。

3. 使用索引

在遍历数组时,你还可以使用第三个参数来获取当前元素的索引。

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

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

在这个例子中,我们使用 v-for="(item, index) in items" 来同时获取当前元素和它的索引,然后在列表项中显示索引和文本。

4. 注意事项

  • 当使用 v-for 时,每个节点必须有一个唯一的 key 属性,这有助于 Vue.js 跟踪每个节点的身份,从而实现高效的 DOM 更新。
  • 尽量避免在同一元素上同时使用 v-ifv-for,因为这可能会导致渲染错误。如果确实需要条件渲染,可以考虑将元素包裹在一个父元素中,并在父元素上使用 v-if
  • 当遍历的对象或数组发生变化时,Vue.js 会自动更新 DOM 以反映这些变化。

三、相关链接

  1. Vue3官方地址
  2. Vue3中文文档
  3. 「Vue3系列」Vue3简介及安装
  4. 「Vue3系列」Vue3起步/创建项目
  5. 「Vue3系列」Vue3指令
  6. 「Vue3系列」Vue3 模板语法
相关文章
|
5天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
2天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
15 7
|
3天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
16 3
|
2天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
16 1
|
2天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
14 1
|
4天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
5天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
6天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
6天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
24 9
|
5天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。