当前位置：首页 > news >正文

【Vue】Vue扫盲（二）指令：v-for 、v-if、v-else-if、v-else、v-show

news 2025/1/16 7:00:54

文章目录

- 一、v-for
- - 遍历数组
  - 数组角标
  - 遍历对象
  - ：Key作用介绍
- 二、v-if、v-show
- 基本用法：
- 案例：
- 三、v-else、v-else-if 使用

继上一篇，继续来扫盲

一、v-for

遍历数据渲染页面是非常常用的需求， Vue 中通过 v-for 指令来实现。

遍历数组

语法： v-for=“item in items”
 items：要遍历的数组，需要在 vue 的 data 中定义好。
 item：迭代得到的当前正在遍历的元素

<!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 v-for ="(user,index) in users" :key="user.name"><!-- 显示user信息 v-for user in users -->当前索引{{index}} ==> {{user.name}} ==>{{user.gender}}==>{{user.age}} <br/><!-- 获取数组下标 v-for (user,index) in users--><!-- 遍历对象v-for value in object  遍历对象中的属性的值v-for (value,key) in object  遍历对象中的属性的名和值v-for (value,key,index) in object  遍历对象中属性名属性值和索引-->对象详情：<span v-for="(value,key,index) in user">{{key}}=={{value }}=={{index}}&nbsp;   </span><!-- 遍历的时候都加上:key来区分不同数据，提高vue渲染效率 --></li></ul><ul><li v-for="(num,index) in nums" ::key="index" >{}</li></ul></div><script src="../node_modules/vue/dist/vue.js"></script><script>new Vue({el:"#app",data:{users:[{ name: '柳岩', gender: '女', age: 21 },{ name: '张三', gender: '男', age: 18 },{ name: '范冰冰', gender: '女', age: 24 },{ name: '刘亦菲', gender: '女', age: 18 },{ name: '古力娜扎', gender: '女', age: 25 }],nums:[1,2,3,4,5,5]},methods: {},})</script>
</body>
</html>

效果
在这里插入图片描述

数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：
语法： v-for=“(item,index) in items”
 items：要迭代的数组
 item：迭代得到的数组元素别名
 index：迭代到的当前元素索引，从 0 开始。

<div id="app">
<ul>
<li v-for="(user, index) in users">
{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>
</div>

效果：
在这里插入图片描述

遍历对象

v-for 除了可以迭代数组，也可以迭代对象。语法基本类似
语法：
v-for=“value in object”
v-for=“(value,key) in object”
v-for=“(value,key,index) in object”

 1 个参数时，得到的是对象的属性值
 2 个参数时，第一个是属性值，第二个是属性名
 3 个参数时，第三个是索引，从 0 开始
示例：

<div id="app"><ul><li v-for="(value, key, index) in user">{{index + 1}}. {{key}} - {{value}}</li></ul>
</div><script src="../node_modules/vue/dist/vue.js"></script><script type="text/javascript">
let vm = new Vue({
el: "#app",
data: {
user: { name: '张三', gender: '男', age: 18 }
}
})
</script>

效果：
在这里插入图片描述

：Key作用介绍

用来标识每一个元素的唯一特征，这样 Vue 可以使用“就地复用” 策略有效的提高渲染的
效率。
示例：

<ul>
<li v-for="(item,index) in items" :key=”index”></li>
</ul>
<ul>
<li v-for="item in items" :key=”item.id”></li>
</ul>

最佳实践：
如果 items 是数组，可以使用 index 作为每个元素的唯一标识
如果 items 是对象数组，可以使用 item.id 作为每个元素的唯一标识

特别注意：当 v-if 和 v-for 出现在一起时， v-for 优先级更高。也就是说，会先遍历，再判断条件。
修改 v-for 中的案例，添加 v-if：

<ul>
<li v-for="(user, index) in users" v-if="user.gender == '女'">{{index + 1}}. {{user.name}} - {{user.gender}} - {{user.age}}
</li>
</ul>

在这里插入图片描述

二、v-if、v-show

基本用法：

v-if，顾名思义，条件判断。当得到结果为 true 时，所在的元素才会被渲染。
v-show，当得到结果为 true 时，所在的元素才会被显示。
语法： v-if=“布尔表达式”, v-show=“布尔表达式”,

案例：

<!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"><button @click="show=!show">点我呀</button><br/><span v-if="show">v-if看到我了</span><br/><span v-show="show">v-show看到我了</span></div><script src="../node_modules/vue/dist/vue.js"></script><script>new Vue({el:"#app",data:{show:true},methods: {},})</script></body>
</html>

结果1：
在这里插入图片描述

结果2
在这里插入图片描述

三、v-else、v-else-if 使用

注意：v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

示例：

<!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"><button @click="random=Math.random()">点我呀</button><span>{{random}}</span><h1 v-if="random>=0.75">看到我了，&gt;=0.75</h1><h1 v-else-if="random>=0.5">看到我了，&gt;=0.5</h1><h1 v-else-if="random>=0.2">看到我了，&gt;=0.2</h1><h1 v-else="random<0.2">看到我了，&lt;=0.2</h1></div><script src="../node_modules/vue/dist/vue.js"></script><script>new Vue({el:"#app",data:{random:1},methods: {},})</script>
</body>
</html>