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

- 日理万妓 2023-06-30 09:26 64阅读 0赞

前言

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

本章目标

  • 学会条件渲染的使用
  • 学会可复用的key的使用
  • 学会列表渲染的使用

条件渲染

1.v-if的使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <div id="app01">
  9.     <span v-if="type==='A'">成绩为A</span>
  10. </div>
  11. <script src="../js/vue.js"></script>
  12. <script>
  13.     let vm=new Vue({
  14.         el:'#app01',
  15.         data:{
  16.             type:'A'
  17.         },
  18.         methods:{
  20.         },
  21.         watch:{
  23.         },
  24.         computed:{
  26.         }
  27.     })
  28. </script>
  29. </body>
  30. </html>

结果：成绩为A
v-if判断条件是否相等，就像if一样，如果相等，那么值就会为真(true)。

与之对应的还有v-else、v-else-if。

2.v-else的使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <div id="app01">
  9.     <span v-if="type==='A'">成绩为A</span>
  10.     <span v-else>成绩为B</span>
  11. </div>
  12. <script src="../js/vue.js"></script>
  13. <script>
  14.     let vm=new Vue({
  15.         el:'#app01',    
  16.         data:{
  17.             type:'B'
  18.         },
  19.         methods:{
  21.         },
  22.         watch:{
  24.         },
  25.         computed:{
  27.         }
  28.     })
  29. </script>
  30. </body>
  31. </html>

结果：成绩为B

小练习

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .box{
  8.                 width: 100px;
  9.                 height: 100px;
  10.             }
  11.             .red{
  12.                 background: red;
  13.             }
  14.             .blue{
  15.                 background: blue;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div id="app">
  21.             <button @click="handleClick">{
  22.    {text}}</button>
  23.             <div v-if="show" class="box red"></div>
  24.             <div v-else class="blue box"></div>
  25.         </div>
  26.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  27.         <script type="text/javascript">
  28.             let vm=new Vue({
  29.                 el:'#app',
  30.                 data:{
  31.                     show:true,
  32.                     text:'隐藏'
  33.                 },
  34.                 methods:{
  35.                     handleClick(){
  36.                         this.show=!this.show;
  37.                         this.text=this.show?'隐藏':'显示'
  38.                     }
  39.                 }
  40.             })
  42.         </script>
  43.     </body>
  44. </html>

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

3.v-else-if的使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <div id="app01">
  9.     <input type="text" v-model="type"/>
  10.     <div v-if="type==='A'">成绩为A</div>
  11.     <div v-else-if="type==='B'">成绩为B</div>
  12.     <div v-else-if="type==='C'">成绩为C</div>
  13.     <div v-else>不及格</div>
  14. </div>
  15. <script src="../js/vue.js"></script>
  16. <script>
  17.     let vm=new Vue({
  18.         el:'#app01',    
  19.         data:{
  20.             type:''
  21.         },
  22.         methods:{
  24.         },
  25.         watch:{
  27.         },
  28.         computed:{
  30.         }
  31.     })
  32. </script>
  33. </body>
  34. </html>

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

4.v-show

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .box{
  8.                 width: 100px;
  9.                 height: 100px;
  10.             }
  11.             .red{
  12.                 background: red;
  13.             }
  14.             .blue{
  15.                 background: blue;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div id="app">
  21.             <div v-show="show" class="box red"></div>
  22.             <button @click="handleClick()">{
  23.    {text}}</button>
  24.         </div>
  25.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  26.         <script type="text/javascript">
  27.             let vm=new Vue({
  28.                 el:'#app',
  29.                 data:{
  30.                     show:true,
  31.                     text:'隐藏',
  32.                 },
  33.                 methods:{
  34.                     handleClick(){
  35.                         this.show=!this.show;
  36.                         this.text=this.show?'隐藏':'显示'
  37.                     }
  38.                 },
  39.                 computed:{
  41.                 }
  42.             })
  43.         </script>
  44.     </body>
  45. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .box{
  8.                 width: 100px;
  9.                 height: 100px;
  10.             }
  11.             .red{
  12.                 background: red;
  13.             }
  14.             .blue{
  15.                 background: blue;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div id="app">
  21.             <div v-show="show" class="box red"></div>
  22.             <div class="box blue" v-if="show"></div>
  23.             <button @click="handleClick()">{
  24.    {text}}</button>
  25.         </div>
  26.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  27.         <script type="text/javascript">
  28.             let vm=new Vue({
  29.                 el:'#app',
  30.                 data:{
  31.                     show:true,
  32.                     text:'隐藏',
  33.                 },
  34.                 methods:{
  35.                     handleClick(){
  36.                         this.show=!this.show;
  37.                         this.text=this.show?'隐藏':'显示'
  38.                     }
  39.                 },
  40.                 computed:{
  42.                 }
  43.             })
  44.         </script>
  45.     </body>
  46. </html>

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

  • 频繁的切换显示/隐藏要使用v-show
  • 只判断一次时，使用v-if

5.减少dom的生成

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .box{
  8.                 width: 100px;
  9.                 height: 100px;
  10.             }
  11.             .red{
  12.                 background: red;
  13.             }
  14.             .blue{
  15.                 background: blue;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div id="app">
  21.             <div v-if="show">
  22.                 <div class="box red"></div>
  23.                 <div class="box blue"></div>
  24.             </div>
  25.         </div>
  26.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  27.         <script type="text/javascript">
  28.             let vm=new Vue({
  29.                 el:'#app',
  30.                 data:{
  31.                     show:true,
  32.                 },
  33.                 methods:{
  35.                 },
  36.                 computed:{
  38.                 }
  39.             })
  40.         </script>
  41.     </body>
  42. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.        <meta charset="UTF-8">
  5.        <title></title>
  6.        <style type="text/css">
  7.            .box{
  8.                width: 100px;
  9.                height: 100px;
  10.            }
  11.            .red{
  12.                background: red;
  13.            }
  14.            .blue{
  15.                background: blue;
  16.            }
  17.        </style>
  18.    </head>
  19.    <body>
  20.        <div id="app">
  21.            <div v-if="show">
  22.                <div class="box red"></div>
  23.                <div class="box blue"></div>
  24.            </div>
  25.            <template v-if="show">
  26.                <div class="box red"></div>
  27.                <div class="box blue"></div>
  28.            </template>
  29.        </div>
  30.        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  31.        <script type="text/javascript">
  32.            let vm=new Vue({
  33.                el:'#app',
  34.                data:{
  35.                    show:true,
  36.                },
  37.                methods:{
  39.                },
  40.                computed:{
  42.                }
  43.            })
  44.        </script>
  45.    </body>
  46. </html>

在这里插入图片描述
现在我有心中萌生了一个想法，v-if可以使用template,那么v-show是否可以使用呢？

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             .box{
  8.                 width: 100px;
  9.                 height: 100px;
  10.             }
  11.             .red{
  12.                 background: red;
  13.             }
  14.             .blue{
  15.                 background: blue;
  16.             }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div id="app">
  21.             <template v-if="show">
  22.                 <div class="box red"></div>
  23.                 <div class="box blue"></div>
  24.             </template>
  25.             <template v-show="show">
  26.                 <div class="box red"></div>
  27.                 <div class="box blue"></div>
  28.             </template>
  29.             <button @click="handleClick()">{
  30.    {text}}</button>
  31.         </div>
  32.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  33.         <script type="text/javascript">
  34.             let vm=new Vue({
  35.                 el:'#app',
  36.                 data:{
  37.                     show:true,
  38.                     text:'隐藏',
  39.                 },
  40.                 methods:{
  41.                     handleClick(){
  42.                         this.show=!this.show;
  43.                         this.text=this.show?'隐藏':'显示'
  44.                     }
  45.                 },
  46.                 computed:{
  48.                 }
  49.             })
  50.         </script>
  51.     </body>
  52. </html>

在这里插入图片描述
在这里插入图片描述
答案是v-if可以使用template，而v-show不能使用template。

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

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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.    <meta charset="UTF-8">
  5.    <title></title>
  6. </head>
  7. <body>
  8. <div id="app01">
  9.    <template v-if="type==='username'">
  10.        <label>用户名</label>
  11.        <input type="text" placeholder="请输入您的账号" />
  12.    </template>
  13.    <template v-else>
  14.        <label>邮箱</label>
  15.        <input type="text" placeholder="请输入您的邮箱" />
  16.    </template>
  17.    <p>
  18.        <a href=""@click.prevent="type='username'">用户名登录</a>|
  19.        <a href=""@click.prevent="type='email'">邮箱登录</a>
  20.    </p>
  21. </div>
  22. <script src="../js/vue.js"></script>
  23. <script>
  24.    let vm=new Vue({
  25.        el:'#app01',    
  26.        data:{
  27.            isShow:true,
  28.            type:'username'
  29.        },
  30.        methods:{
  32.        },
  33.        watch:{
  35.        },
  36.        computed:{
  38.        }
  39.    })
  40. </script>
  41. </body>
  42. </html>

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

示例二:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8. <div id="app01">
  9.     <template v-if="type==='username'">
  10.         <label>用户名:</label>
  11.         <input type="text" placeholder="请输入您的用户名"  key='usename'/>
  12.     </template>
  13.     <template v-else>
  14.         <label>邮箱:</label>
  15.         <input type="text" placeholder="请输入您的邮箱"  key='email'/>
  16.     </template>
  17.     <p>
  18.         <a href=""@click.prevent="type='username'">用户名登录</a>|
  19.         <a href=""@click.prevent="type='email'">邮箱登录</a>
  20.     </p>
  21. </div>
  22. <script src="../js/vue.js"></script>
  23. <script>
  24.     let vm=new Vue({
  25.         el:'#app01',    
  26.         data:{
  27.             isShow:true,
  28.             type:'username'
  29.         },
  30.         methods:{
  32.         },
  33.         watch:{
  35.         },
  36.         computed:{
  38.         }
  39.     })
  40. </script>
  41. </body>
  42. </html>

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

列表渲染

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

1.v-for的基本使用

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>v-for的基本使用</title>
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <ul>
  10.                 <li v-for="(item) in arr">{
  11.    {item}}</li>
  12.             </ul>
  13.         </div>
  14.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  15.         <script type="text/javascript">
  16.             let vm=new Vue({
  17.                 el:'#app',
  18.                 data:{
  19.                     arr:['apple','banana','pear']
  20.                 },
  21.                 methods:{
  23.                 },
  24.                 computed:{
  26.                 }
  27.             })
  28.         </script>
  29.     </body>
  30. </html>

结果：

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

2.v-for中带索引

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>v-for的基本使用</title>
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <ul>
  10.                 <li v-for="(item,index) in arr">{
  11.    {item}}--{
  12.    {index}}</li>
  13.             </ul>
  14.         </div>
  15.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  16.         <script type="text/javascript">
  17.             let vm=new Vue({
  18.                 el:'#app',
  19.                 data:{
  20.                     arr:['apple','banana','pear']
  21.                 },
  22.                 methods:{
  24.                 },
  25.                 computed:{
  27.                 }
  28.             })
  29.         </script>
  30.     </body>
  31. </html>

在这里插入图片描述

3.v-for迭代字符串

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>v-for的基本使用</title>
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <ul>
  10.                 <li v-for="(item,index) in arr">{
  11.    {item}}--{
  12.    {index}}</li>
  13.             </ul>
  14.             <ul>
  15.                 <li v-for="item in 'helloworld'">{
  16.    {item}}</li>
  17.             </ul>
  18.         </div>
  19.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  20.         <script type="text/javascript">
  21.             let vm=new Vue({
  22.                 el:'#app',
  23.                 data:{
  24.                     arr:['apple','banana','pear']
  25.                 },
  26.                 methods:{
  28.                 },
  29.                 computed:{
  31.                 }
  32.             })
  33.         </script>
  34.     </body>
  35. </html>

在这里插入图片描述

4.v-for迭代对象

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>v-for迭代对象</title>
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <ul>
  10.                 <li v-for="(value,key,index) of obj">{
  11.    {value}}-{
  12.    {key}}-{
  13.    {index}}</li>
  14.             </ul>
  15.         </div>
  16.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  17.         <script type="text/javascript">
  18.             let vm=new Vue({
  19.                 el:'#app',
  20.                 data:{
  21.                     obj:{
  22.                         name:'kk',
  23.                         age:18,
  24.                         sex:'male'
  25.                     }
  26.                 },
  27.                 methods:{
  29.                 },
  30.                 computed:{
  32.                 }
  33.             })
  34.         </script>
  35.     </body>
  36. </html>

在这里插入图片描述

5.v-for迭代整数

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>v-for迭代对象</title>
  6.     </head>
  7.     <body>
  8.         <div id="app">
  9.             <ul>
  10.                 <li v-for="(value,key,index) of obj">{
  11.    {value}}-{
  12.    {key}}-{
  13.    {index}}</li>
  14.             </ul>
  15.             <ul>
  16.                 <li v-for="item in 10">{
  17.    {item}}</li>
  18.             </ul>
  19.         </div>
  20.         <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
  21.         <script type="text/javascript">
  22.             let vm=new Vue({
  23.                 el:'#app',
  24.                 data:{
  25.                     obj:{
  26.                         name:'kk',
  27.                         age:18,
  28.                         sex:'male'
  29.                     }
  30.                 },
  31.                 methods:{
  33.                 },
  34.                 computed:{
  36.                 }
  37.             })
  38.         </script>
  39.     </body>
  40. </html>

结果：

在这里插入图片描述
注意：但我们迭代整数的时候，item从1开始而不是从0开始。

总结

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

发表评论

表情：
评论列表 （有 0 条评论，64人围观）

还没有评论，来说两句吧...

相关阅读