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

执键行天涯

已于 2024-10-10 15:27:29 修改

阅读量1.3k

点赞数 26

分类专栏： VUE 文章标签： vue.js javascript ecmascript

于 2024-10-10 12:52:35 首次发布

本文链接：https://blog.csdn.net/qq_39666711/article/details/142816364

版权

VUE 专栏收录该内容

31 篇文章 5 订阅

订阅专栏

【Vue】Vue扫盲（一）事件标签、事件修饰符：@click.prevent @click.stop @click.stop.prevent、按键修饰符、及常用指令

文章目录

继上一篇，继续来扫盲

一、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>