vue学习笔记(五)条件渲染和列表渲染

最新推荐文章于 2023-04-08 13:49:19 发布
最新推荐文章于 2023-04-08 13:49:19 发布
阅读量343 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ling_76539446/article/details/103108444
版权

前言

在众多的编程语言中，我们的基础语法总是少不了一些专业语法，比如像定义变量，条件语句，for循环，数组，函数等等，vue.js这个优秀的前端框架中也有同样的语法，我们换一个名词，将条件语句改成专业词汇叫做条件渲染，循环语句改成专业词汇叫做列表渲染，这样比较舒服一点。

本章目标

  • 学会条件渲染的使用

  • 学会可复用的key的使用

  • 学会列表渲染的使用

条件渲染

1.v-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <span v-if="type==='A'">成绩为A</span>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',
        data:{
            type:'A'
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果：成绩为A

v-if判断条件是否相等，就像if一样，如果相等，那么值就会true,与之对应的还有v-else,v-else-if

2.v-else的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <span v-if="type==='A'">成绩为A</span>
    <span v-else>成绩为B</span>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',    
        data:{
            type:'B'
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果:成绩为B

小练习

我们做一个小练习，巩固一下v-if和v-else的使用，需求如下：点击一个按钮时,按钮上的文字变为显示，再次点击时按钮上的文字变为隐藏，当按钮上的文字显示隐藏时，显示红色，按钮上的文字变为显示时显示蓝色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <button @click="handleClick">{{text}}</button>
            <div v-if="show" class="box red"></div>
            <div v-else class="blue box"></div>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                    text:'隐藏'
                },
                methods:{
                    handleClick(){
                        this.show=!this.show;
                        this.text=this.show?'隐藏':'显示'
                    }
                }
            })
            
        </script>
    </body>
</html>

结果

3.v-else-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <input type="text" v-model="type"/>
    <div v-if="type==='A'">成绩为A</div>
    <div v-else-if="type==='B'">成绩为B</div>
    <div v-else-if="type==='C'">成绩为C</div>
    <div v-else>不及格</div>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',    
        data:{
            type:''
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果:

4.v-show

说起这个v-show，其实和v-if有与曲同工的妙处，但是又有不同的地方，我们来看下示例你就秒懂了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-show="show" class="box red"></div>
            <button @click="handleClick()">{{text}}</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                    text:'隐藏',
                },
                methods:{
                    handleClick(){
                        this.show=!this.show;
                        this.text=this.show?'隐藏':'显示'
                    }
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

当按钮变为显示的时候，背景颜色消失，这里就不截图了，有兴趣的小伙伴可以自己去尝试，既然v-if可以帮我们实现元素的显示和隐藏，那我们还需要v-show干什么呢？不妨看下接下来的实例。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-show="show" class="box red"></div>
            <div class="box blue" v-if="show"></div>
            <button @click="handleClick()">{{text}}</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                    text:'隐藏',
                },
                methods:{
                    handleClick(){
                        this.show=!this.show;
                        this.text=this.show?'隐藏':'显示'
                    }
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

 当我们点击按钮的时候

现在结果已经出来了，使用v-show的dom元素，dom元素只是简单的切换display属性，而v-if会将dom元素移除，当我们再次点击时，v-if又会重新渲染元素，可想而知如果频繁的切换的话，那么有多么的耗费性能，因此我总结了如下几点

  • 频繁的切换显示/隐藏要使用v-show

  • 只判断一次时，使用v-if

5.减少dom的生成

我们都知道js操作dom元素是非常消耗性能的，但是我们需要尽量的避免这个问题，vue中为我们提供了一个template标签，这个标签叫做模板(至于什么叫做模板，后期的博客会讲到)，我们先看一个示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-if="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </div>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

 我们想让图上的那个div消失，不想为了管理同一组元素而多生成一个节点，这样是非常消耗性能的，我们将div标签变成template标签

www.wityx.com www.wityx.com 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div v-if="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </div>
            <template v-if="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </template>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>
View Code

 现在我有心中萌生了一个想法，v-if可以使用template,那么v-show是否可以使用呢？

www.wityx.com www.wityx.com 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                width: 100px;
                height: 100px;
            }
            .red{
                background: red;
            }
            .blue{
                background: blue;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <template v-if="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </template>
            <template v-show="show">
                <div class="box red"></div>
                <div class="box blue"></div>
            </template>
            <button @click="handleClick()">{{text}}</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    show:true,
                    text:'隐藏',
                },
                methods:{
                    handleClick(){
                        this.show=!this.show;
                        this.text=this.show?'隐藏':'显示'
                    }
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>
View Code

 答案是v-if可以使用template，而v-show不能使用template

vue中用key管理可复用的元素

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。例如，如果你允许用户在不同的登录方式之间切换。

示例一：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <template v-if="type==='username'">
        <label>用户名</label>
        <input type="text" placeholder="请输入您的账号" />
    </template>
    <template v-else>
        <label>邮箱</label>
        <input type="text" placeholder="请输入您的邮箱" />
    </template>
    <p>
        <a href=""@click.prevent="type='username'">用户名登录</a>|
        <a href=""@click.prevent="type='email'">邮箱登录</a>
    </p>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',    
        data:{
            isShow:true,
            type:'username'
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果：

当我们在用户名登录和邮箱切换的时候，我们发现我们输入的内容始终保持，为什么呢?总的来说，因为两个模板使用了相同的元素，input不会被替换掉——仅仅是替换了它的 placeholder属性，这样也不总是符合实际需求，所以 Vue 为你提供了一种方式来表达这两个元素是完全独立的,不要复用它们,只需添加一个具有唯一值的key属性即可。

示例二:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app01">
    <template v-if="type==='username'">
        <label>用户名:</label>
        <input type="text" placeholder="请输入您的用户名"  key='usename'/>
    </template>
    <template v-else>
        <label>邮箱:</label>
        <input type="text" placeholder="请输入您的邮箱"  key='email'/>
    </template>
    <p>
        <a href=""@click.prevent="type='username'">用户名登录</a>|
        <a href=""@click.prevent="type='email'">邮箱登录</a>
    </p>
</div>
<script src="../js/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app01',    
        data:{
            isShow:true,
            type:'username'
        },
        methods:{
            
        },
        watch:{
            
        },
        computed:{
            
        }
    })
</script>
</body>
</html>

结果：

现在我们点击切换的时候，输入框都会重新渲染，当然我们的<label>标签依旧的高效的复用，因为它没有添加key。

列表渲染

我们用v-for指令根据一组数组的选项列表进行渲染，v-for指令需要以item in items的形式的特殊语法，items是原数据数组并且item是元素迭代的别名

1.v-for的基本使用

语法：(item,index) in|of items

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for的基本使用</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item) in arr">{{item}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    arr:['apple','banana','pear']
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

结果：

当然v-for中也可以带第二个参数index

2.v-for中带索引
www.wityx.com www.wityx.com 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for的基本使用</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in arr">{{item}}--{{index}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    arr:['apple','banana','pear']
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>
View Code
3.v-for迭代字符串
www.wityx.com www.wityx.com 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for的基本使用</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(item,index) in arr">{{item}}--{{index}}</li>
            </ul>
            <ul>
                <li v-for="item in 'helloworld'">{{item}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    arr:['apple','banana','pear']
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>
View Code
4.v-for迭代对象

语法：(value,key,index) of | in items

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for迭代对象</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(value,key,index) of obj">{{value}}-{{key}}-{{index}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    obj:{
                        name:'kk',
                        age:18,
                        sex:'male'
                    }
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

结果:

5.v-for迭代整数
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>v-for迭代对象</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="(value,key,index) of obj">{{value}}-{{key}}-{{index}}</li>
            </ul>
            <ul>
                <li v-for="item in 10">{{item}}</li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            let vm=new Vue({
                el:'#app',
                data:{
                    obj:{
                        name:'kk',
                        age:18,
                        sex:'male'
                    }
                },
                methods:{
                    
                },
                computed:{
                    
                }
            })
        </script>
    </body>
</html>

结果：

注意：但我们迭代整数的时候，item从1开始而不是从0开始

总结

在本章内容中，我们一共学习了三个知识点，分别是条件渲染的使用(v-if,v-else,v-else-if),管理可复用的key,列表渲染(v-for的基本使用等等)，本章的内容也多但是在实际应用上非常广泛，毕竟这些是非常基础的语法，基础不牢，地动山摇，学习任何东西都需要自己一步一个脚印走出来。

h7ml
关注
深入理解Vue 的条件渲染和列表渲染
01-21
这两天学习了Vue.js 感觉条件渲染和列表渲染知识点挺多的，而且很重要，所以，今天添加一点小笔记。 条件渲染 v-if 在 < template> 中配合 v-if 渲染一整组 在使用 v-if 控制元素的时候，我们需要将它添加到这个...
VUE入门到实战--Vue条件渲染和列表渲染
weixin_37968345的博客
10-10 275
1、条件渲染 1.1、v-if和v-show 1、使用官网的话来说： v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS ...
vue中v-show指令的使用之Vue知识点归纳(五)
代码小疯子
12-01 1445
本文中将描述 v-show 指令的基本使用 1 简述 v-show 指令用来控制元素的显示与隐藏 显示 状态的div <div v-show="true"></civ> 隐藏状态下的 div <div v-show="false"></civ> 2 实例 <!DOCTYPE html> <html lang="en">...
Vue入门笔记（一）——基础语法
穆子航的博客
08-01 214
一、Vue使用 官网：https://cn.vuejs.org 进入官网之后，打开 学习 -> 教程 ，点击左侧的 安装 开发版本：开发的时候使用，有很多警告（开发者下载） 生产版本：正式生产环境时候使用，删除警告的部分 这里使用<script>标签引入，Vue会被注册成一个全局变量 二、挂载点，模板与实例 挂载点 是vue的一个基本点，需要在el属性中写明，所有的操作，...
vue基础 指令篇
shjd_J的博客
07-09 329
Vue.js 1.Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架Vue是一个Vue是一个用于的框架Vue是一个用于构建用户界面得2.渐进式框架介绍a. Vue.js提供了很多的功能，但是这些功能并不是集成在一起的，而是分开的类似于Nodejs,拆分成很多个小模块b. 在项目中我们用到什么，就导入什么这样可以保证我们用到的最少c. 说人话：Vue相当于是一个五星级自助餐，我们想要用什么就拿什么，这样可以最大限度避免浪费资源(1)Vue是什么？js框架(2)Vue干什么用
JS小方法
qq_42105170的博客
12-31 445
JS方法总结 // 去重 // 数组去重 let obj = this.tableDetail.receiver if(this.tableDetail.receiver) { obj.split(',').forEach((item)=>{ this.sendUserListD = this.sendUserListD.filter((it)=>{ return it.cnName !== item })
详解Vue学习笔记进阶篇之列表过渡及其他
12-11
本文将介绍Vue中的列表过渡，动态过渡， 以及可复用过渡是实现。 列表过渡 目前为止，关于过渡我们已经讲到： 单个节点 同一时间渲染多个节点中的一个 那么怎么同时渲染整个列表，比如使用 v-for ？在这种场景中，...
Vue Markdonwn学习笔记
11-17
Vue Markdown学习笔记主要涵盖了使用Vue.js框架与Markdown语法结合，以构建高效、可维护的文档和界面的知识。Vue.js是一个轻量级的前端JavaScript框架，它以组件化开发为核心，而Markdown则是一种简洁的标记语言，常...
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
VUE学习笔记
07-17
Vue的学习笔记将涵盖其核心概念、基本用法以及实际应用。 一、Vue的核心概念 1. 双向数据绑定：Vue采用MVVM（Model-View-ViewModel）模式，通过`v-model`指令实现了视图与数据模型之间的双向绑定，使得数据变化时...
Vue的基础知识（一）
sunnyaha12的博客
10-29 300
一、vue介绍 vue：渐进式JavaScript框架 vue的特点：易用，熟悉HTML、CSS、JavaScript可以快速上手。 灵活，在一个库和一套完整的框架之间自如伸缩。 高效：20KB运行大小，超快虚拟DOM。 vue的优势：数据驱动 组件化 vue的基本使用步骤： 1、需要提供标签用于填充数据 2、引入vue.js库文件 3、使用vue的语法做功能 实例参数分析 el：元素的挂载位置（值可以是c...
Vue学习（五）——条件渲染
weixin_45927758的博客
10-06 193
v-if="xxx",v-else-if="xxx",v-else,这些语句和if，else作用类似，xxx是一个布尔值，判断为真则显示标签。 案例：切换输入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
vue---条件渲染和列表渲染
m0_62903673的博客
07-11 255
vue---条件渲染和列表渲染
Vue—条件渲染与列表渲染
Guuiabc的博客
01-23 146
注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。2.语法：v-for="(item, index) in xxx":key="yyy"3.备注：使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少)特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉。(2).v-else-if="表达式"(3).v-else="表达式"(1).v-if="表达式"写法：v-show="表达式"
vue当中的条件渲染和列表渲染
m0_68997646的博客
10-28 1098
vue当中的条件渲染和列表渲染
Vue条件渲染与列表渲染【Vue】
最新发布
weixin_53943447的博客
04-08 483
Vue监测数据的原理Vue 会监视data中所有层次的数据。如何监测对象中的数据？通过 setter 实现监视，且要在new Vue时就要传入要监测的数据。（1）对象中后追加的属性，Vue默认不做响应式处理（2）如需给后添加的属性做响应式，请使用如下 API:如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两件事：（1）调用原生对应的方法对数组进行更新（2）重新解析模板，进而更新页面在 Vue 修改数组中的某个元素一定要用如下方法：等（2）
vue.js基础学习（条件渲染与列表渲染）
qq_58866450的博客
08-20 303
基础入门：vue.js 条件渲染与列表渲染
【微信小程序】条件渲染和列表渲染
weixin_62542181的博客
07-16 5025
本文讲解了微信小程序的事件传参细节，input 事件的介绍和使用，以及`wxml`中比较重要的条件渲染和列表渲染
6.Vue - 渲染、列表中key的原理和作用、列表排序
weixin_51351637的博客
09-02 2558
key是虚拟对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较。
Vue2学习笔记与实战案例解析
‘vue_basic’可能包含了Vue2的基础知识和理论，如模板语法、计算属性、事件处理、表单输入绑定、组件基础、条件渲染、列表渲染等入门级别的内容。这个部分更适合初学者，或是那些希望对Vue2有全面了解的开发者。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值