脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue条件判断循环

Vue条件判断之循环举例详解

 更新时间：2024年07月25日 09:50:45   作者：泡芙冰淇淋ya  
在Vue进行前端开发中,条件判断主要用于根据不同的条件来决定显示或隐藏,或者进行视图之间的切换,这篇文章主要给大家介绍了关于Vue条件判断之循环举例详解的相关资料,需要的朋友可以参考下

1 条件判断v-if、v-else-if、v-else

1.1 简介

  • 在Vue中，v-if、v-else-if、v-else 是用于条件渲染的指令。
  • 它们根据表达式的真假值来有条件地渲染元素。
  • 这些指令对于控制页面上不同内容的显示非常有用，特别是在需要根据数据动态显示不同视图时。
  • v-if：根据表达式的真假值来条件性地渲染元素。
  • v-else-if：作为v-if的“else if”块，用于检查多个条件。
  • v-else：为v-if/v-else-if提供“else”块，当所有前面的条件都不满足时渲染。

1.2使用

1、v-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值(truthy value)时渲染。

示例：

<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: 85 // 假设这是学生的分数  
    }  
  }  
}  
</script>

2、v-else-if

v-else-if，顾名思义，用作v-if的“else if”块。你可以链式地使用多个v-else-if来检查多个条件。

注意：v-else-if和v-else必须紧跟在v-if或v-else-if元素之后，否则它们将不会被识别。

3、v-else

v-else指令为v-if、v-else-if提供“else”块。v-else元素会渲染出来，如果前面的v-if和v-else-if条件都不满足。

2 循环v-for

2.1 简介

  • Vue.js 中的 v-for 指令用于基于一个数组或对象来渲染一个列表。
  • 它可以使用在 <template>、<div>、<span> 或其他任何元素上，并且可以重复渲染该元素或模板块多次。
  • v-for 指令需要一个表达式，该表达式声明了如何遍历数组或对象。

2.2基本语法

对于数组：

items 是要遍历的数组，item 是数组元素的一个别名（可以使用任何名称），index 是当前元素的索引（也是可选的）。:key="index" 是一个好的实践，用于给每个循环的元素提供一个唯一的 key，以帮助 Vue 跟踪每个节点的身份，从而重用和重新排序现有元素。

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

对于对象：

这里，object 是要遍历的对象，value 是对象的属性值，key 是对象的键名。

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

附：注意事项

v-for使用过程最好为元素添加key，且key值与元素是一一对应

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li class="li" v-for="item in language" :key="item">{{item}}</li>
      </ul>
    </div>
  </body>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: "#app",
      data: {
        language: ["c", "c++", "python", "java"],
      },
    });
  </script>
</html>

总结 

到此这篇关于Vue条件判断之循环举例详解的文章就介绍到这了,更多相关Vue条件判断循环内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

最新评论