• 24.Vue条件渲染

    目录

    1.使用v-show做条件渲染

    2.使用v-if做条件渲染

    3.小案例

    4.v-else和v-else-if

    5.v-if与template的配合使用

    6.总结

    在这一节当中，我们来讲一下Vue中的条件渲染，顾名思义，意思就是，你符合某些条件，我再去给你渲染某些东西。

    1.使用v-show做条件渲染

    需求：需要实现标签显示和隐藏状态的切换

    这个需求如果使用原生去实现的话，可以通过display属性来实现。那么在Vue中，我们不需要亲自去写这些属性，它给你提供了一个指令v-show，我们可以通过它来实现。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>条件渲染</title>
    8.     <!--引入Vue-->
    9.     <script type="text/javascript" src="../js/vue.js"></script>
    10.     <style>
    11.        
    12.     </style>
    13. </head>
    14. <body>
    15.     <!--准备好一个容器-->
    16.     <div id="root">
    17.        
    18.         <h2 v-show="false">欢迎学习{{name}}</h2>
    19.  
    20.     </div>
    21. </body>
    22.  
    23. <script type="text/javascript">
    24.     Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    25.     new Vue({
    26.         el:'#root',
    27.         data:{
    28.             name:'Vue'
    29.         },
    30.         methods: {
    31.             
    32.         },
    33.     })
    34. </script>
    35. </html>

    实现效果：

    我们可以看到v-show的本质还是在控制display属性，而且原来的html结构并没有消失，只是被隐藏掉了而已。

    而且我们还可以通过变量来动态的控制显示和隐藏

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>条件渲染</title>
    8.     <!--引入Vue-->
    9.     <script type="text/javascript" src="../js/vue.js"></script>
    10.     <style>
    11.        
    12.     </style>
    13. </head>
    14. <body>
    15.     <!--准备好一个容器-->
    16.     <div id="root">
    17.        
    18.         <h2 v-show="show">欢迎学习{{name}}</h2>
    19.  
    20.     </div>
    21. </body>
    22.  
    23. <script type="text/javascript">
    24.     Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    25.     const vm = new Vue({
    26.         el:'#root',
    27.         data:{
    28.             name:'Vue',
    29.             show:false
    30.         },
    31.         methods: {
    32.             
    33.         },
    34.     })
    35. </script>
    36. </html>

    实现效果：

    其实上面的v-show不仅可以赋值true或false,而且还可以使用表达式来实现同样的效果：

    <h2 v-show="1 === 1">欢迎学习{{name}}</h2>

    2.使用v-if做条件渲染

    上面我们讲了v-show可以实现显示和隐藏，那么v-if也可以实现同样的效果，只不过v-if隐藏的更彻底，直接连html结构也没了。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>条件渲染</title>
    8.     <!--引入Vue-->
    9.     <script type="text/javascript" src="../js/vue.js"></script>
    10.     <style>
    11.        
    12.     </style>
    13. </head>
    14. <body>
    15.     <!--准备好一个容器-->
    16.     <div id="root">
    17.         <!-- 使用v-show做条件渲染  -->
    18.         <!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
    19.         <!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
    20.  
    21.         <!-- 使用v-if做条件渲染 -->
    22.         <h2 v-if="false">欢迎学习{{name}}</h2>
    23.     </div>
    24. </body>
    25.  
    26. <script type="text/javascript">
    27.     Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    28.     const vm = new Vue({
    29.         el:'#root',
    30.         data:{
    31.             name:'Vue',
    32.             show:false
    33.         },
    34.         methods: {
    35.             
    36.         },
    37.     })
    38. </script>
    39. </html>

    实现效果：

     同样的上面的v-if不仅可以赋值true或false,而且也可以使用表达式来实现同样的效果

    <h2 v-if="1 === 1">欢迎学习{{name}}</h2>

    3.小案例

    刚刚我们已经学完了v-show和v-if的用法，接下来我们就可以用它来实现一个简单的交互。

    有一个数值n初始值是0，有一个按钮，每次点击，n就会加1，要求是n等于1，2，3时各自展示对应的div。

    实现原理是，data中的数据一旦发生改变，那么整个模板就会被重新解析，从而根据现在的值实现不同的渲染。

    v-show实现：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>条件渲染</title>
    8.     <!--引入Vue-->
    9.     <script type="text/javascript" src="../js/vue.js"></script>
    10.     <style>
    11.        
    12.     </style>
    13. </head>
    14. <body>
    15.     <!--准备好一个容器-->
    16.     <div id="root">
    17.         <h2>当前的n值是: {{n}}</h2>
    18.         <button @click="n++">点我n+1</button>
    19.         <!-- 使用v-show做条件渲染  -->
    20.         <!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
    21.         <!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
    22.  
    23.         <!-- 使用v-if做条件渲染 -->
    24.         <!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
    25.         <!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
    26.  
    27.         <div v-show="n === 1">Angular</div>
    28.         <div v-show="n === 2">React</div>
    29.         <div v-show="n === 3">Vue</div>
    30.  
    31.     </div>
    32. </body>
    33.  
    34. <script type="text/javascript">
    35.     Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    36.     const vm = new Vue({
    37.         el:'#root',
    38.         data:{
    39.             name:'Vue',
    40.             show:false,
    41.             n:0
    42.         },
    43.         methods: {
    44.             
    45.         },
    46.     })
    47. </script>
    48. </html>

    实现效果：

    v-if实现：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>条件渲染</title>
    8.     <!--引入Vue-->
    9.     <script type="text/javascript" src="../js/vue.js"></script>
    10.     <style>
    11.        
    12.     </style>
    13. </head>
    14. <body>
    15.     <!--准备好一个容器-->
    16.     <div id="root">
    17.         <h2>当前的n值是: {{n}}</h2>
    18.         <button @click="n++">点我n+1</button>
    19.         <!-- 使用v-show做条件渲染  -->
    20.         <!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
    21.         <!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
    22.  
    23.         <!-- 使用v-if做条件渲染 -->
    24.         <!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
    25.         <!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
    26.  
    27.         <div v-if="n === 1">Angular</div>
    28.         <div v-if="n === 2">React</div>
    29.         <div v-if="n === 3">Vue</div>
    30.  
    31.     </div>
    32. </body>
    33.  
    34. <script type="text/javascript">
    35.     Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    36.     const vm = new Vue({
    37.         el:'#root',
    38.         data:{
    39.             name:'Vue',
    40.             show:false,
    41.             n:0
    42.         },
    43.         methods: {
    44.             
    45.         },
    46.     })
    47. </script>
    48. </html>

    实现效果：

    我们可以看到使用v-show和v-if的实现效果是一样的，这个时候就会有人问，既然实现效果都一样，那我们应该用哪个呢？

    如果这个东西有很高的切换频率，变化的很频繁，那么就建议使用v-show,因为v-show的节点还在，它只是动态的控制一下隐藏和显示。

    而v-if，如果变化频率很高，它不断的对dom进行操作，就会存在一定的效率问题。

    4.v-else和v-else-if

    我们都用过if ,else if，那么同样的v-if 也会对应v-else-if，那么刚才的那个案例我们就可以这样去写

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>条件渲染</title>
    8.     <!--引入Vue-->
    9.     <script type="text/javascript" src="../js/vue.js"></script>
    10.     <style>
    11.        
    12.     </style>
    13. </head>
    14. <body>
    15.     <!--准备好一个容器-->
    16.     <div id="root">
    17.         <h2>当前的n值是: {{n}}</h2>
    18.         <button @click="n++">点我n+1</button>
    19.         <!-- 使用v-show做条件渲染  -->
    20.         <!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
    21.         <!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
    22.  
    23.         <!-- 使用v-if做条件渲染 -->
    24.         <!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
    25.         <!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
    26.  
    27.         <div v-if="n === 1">Angular</div>
    28.         <div v-else-if="n === 2">React</div>
    29.         <div v-else-if="n === 3">Vue</div>
    30.  
    31.     </div>
    32. </body>
    33.  
    34. <script type="text/javascript">
    35.     Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    36.     const vm = new Vue({
    37.         el:'#root',
    38.         data:{
    39.             name:'Vue',
    40.             show:false,
    41.             n:0
    42.         },
    43.         methods: {
    44.             
    45.         },
    46.     })
    47. </script>
    48. </html>

    实现效果：

     

    都用v-if和或者使用v-if，v-else-if虽然都可以实现同样的效果，但是都用if的话，所有条件都会进行判断，如果用if,else if的话，只要其中一个条件符合，那么其他的条件就不会再判断了，效率就会高点。

    那么说完了 if 和else if,接下来就该说else了。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>条件渲染</title>
    8.     <!--引入Vue-->
    9.     <script type="text/javascript" src="../js/vue.js"></script>
    10.     <style>
    11.        
    12.     </style>
    13. </head>
    14. <body>
    15.     <!--准备好一个容器-->
    16.     <div id="root">
    17.         <h2>当前的n值是: {{n}}</h2>
    18.         <button @click="n++">点我n+1</button>
    19.         <!-- 使用v-show做条件渲染  -->
    20.         <!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
    21.         <!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
    22.  
    23.         <!-- 使用v-if做条件渲染 -->
    24.         <!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
    25.         <!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
    26.  
    27.         <div v-if="n === 1">Angular</div>
    28.         <div v-else-if="n === 2">React</div>
    29.         <div v-else-if="n === 3">Vue</div>
    30.         <div v-else>哈哈</div>
    31.  
    32.     </div>
    33. </body>
    34.  
    35. <script type="text/javascript">
    36.     Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    37.     const vm = new Vue({
    38.         el:'#root',
    39.         data:{
    40.             name:'Vue',
    41.             show:false,
    42.             n:0
    43.         },
    44.         methods: {
    45.             
    46.         },
    47.     })
    48. </script>
    49. </html>

    实现效果：

     

    我们可以看到，除了1，2，3之外别的都会显示else对应的哈哈 。

    这里我们需要注意一点，如果我们使用v-if,v-else-if，v-else，配合使用的话，这些结构之间必须紧紧的挨在一块，不允许被打断。

    我们可以实验一下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>条件渲染</title>
    8.     <!--引入Vue-->
    9.     <script type="text/javascript" src="../js/vue.js"></script>
    10.     <style>
    11.        
    12.     </style>
    13. </head>
    14. <body>
    15.     <!--准备好一个容器-->
    16.     <div id="root">
    17.         <h2>当前的n值是: {{n}}</h2>
    18.         <button @click="n++">点我n+1</button>
    19.         <!-- 使用v-show做条件渲染  -->
    20.         <!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
    21.         <!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
    22.  
    23.         <!-- 使用v-if做条件渲染 -->
    24.         <!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
    25.         <!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
    26.  
    27.         <div v-if="n === 1">Angular</div>
    28.         <div v-else-if="n === 2">React</div>
    29.         <div>@@@</div>
    30.         <div v-else-if="n === 3">Vue</div>
    31.         <div v-else>哈哈</div>
    32.  
    33.     </div>
    34. </body>
    35.  
    36. <script type="text/javascript">
    37.     Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    38.     const vm = new Vue({
    39.         el:'#root',
    40.         data:{
    41.             name:'Vue',
    42.             show:false,
    43.             n:0
    44.         },
    45.         methods: {
    46.             
    47.         },
    48.     })
    49. </script>
    50. </html>

    实现效果：

     

     我们可以看到打断之前的判断是好使的，而打断后面的内容就不奏效了。

    这是因为被打断后面的部分没有合适的匹配造成的。 

    5.v-if与template的配合使用

    接下来我们再说一个需求：我们有3个h2标签，都是当n等于1的时候进行展示，请问该怎么写？

    这时有人就会说可以这么写，给这3个h2标签都加上if。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>条件渲染</title>
    8.     <!--引入Vue-->
    9.     <script type="text/javascript" src="../js/vue.js"></script>
    10.     <style>
    11.        
    12.     </style>
    13. </head>
    14. <body>
    15.     <!--准备好一个容器-->
    16.     <div id="root">
    17.         <h2>当前的n值是: {{n}}</h2>
    18.         <button @click="n++">点我n+1</button>
    19.         <!-- 使用v-show做条件渲染  -->
    20.         <!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
    21.         <!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
    22.  
    23.         <!-- 使用v-if做条件渲染 -->
    24.         <!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
    25.         <!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
    26.  
    27.         <!-- <div v-if="n === 1">Angular</div>
    28.         <div v-else-if="n === 2">React</div>
    29.         <div>@@@</div>
    30.         <div v-else-if="n === 3">Vue</div>
    31.         <div v-else>哈哈</div> -->
    32.         <h2 v-if="n == 1">你好</h2>
    33.         <h2 v-if="n == 1">哈喽</h2>
    34.         <h2 v-if="n == 1">Vue</h2>
    35.  
    36.     </div>
    37. </body>
    38.  
    39. <script type="text/javascript">
    40.     Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    41.     const vm = new Vue({
    42.         el:'#root',
    43.         data:{
    44.             name:'Vue',
    45.             show:false,
    46.             n:0
    47.         },
    48.         methods: {
    49.             
    50.         },
    51.     })
    52. </script>
    53. </html>

    实现效果:

    这个时候我们就会发现这些条件判断都是一样的，但我们却要重复的去写3次，那么有没有更简单的办法呢？

    这个时候又有人会说，那我们在这3个h2的外部包裹一个div,然后只在div上写一个if判断就可以了。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>条件渲染</title>
    8.     <!--引入Vue-->
    9.     <script type="text/javascript" src="../js/vue.js"></script>
    10.     <style>
    11.        
    12.     </style>
    13. </head>
    14. <body>
    15.     <!--准备好一个容器-->
    16.     <div id="root">
    17.         <h2>当前的n值是: {{n}}</h2>
    18.         <button @click="n++">点我n+1</button>
    19.         <!-- 使用v-show做条件渲染  -->
    20.         <!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
    21.         <!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
    22.  
    23.         <!-- 使用v-if做条件渲染 -->
    24.         <!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
    25.         <!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
    26.  
    27.         <!-- <div v-if="n === 1">Angular</div>
    28.         <div v-else-if="n === 2">React</div>
    29.         <div>@@@</div>
    30.         <div v-else-if="n === 3">Vue</div>
    31.         <div v-else>哈哈</div> -->
    32.         <div v-if="n === 1">
    33.             <h2>你好</h2>
    34.             <h2>哈喽</h2>
    35.             <h2>Vue</h2>
    36.         </div>
    37.  
    38.     </div>
    39. </body>
    40.  
    41. <script type="text/javascript">
    42.     Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    43.     const vm = new Vue({
    44.         el:'#root',
    45.         data:{
    46.             name:'Vue',
    47.             show:false,
    48.             n:0
    49.         },
    50.         methods: {
    51.             
    52.         },
    53.     })
    54. </script>
    55. </html>

    实现效果：

    我们可以看到，同样可以实现效果，但是这样写有一点小小的美中不足，因为我们破坏了原有的结构。虽然这种对结构的影响，可以通过样式控制消化掉。

    那么这个时候，我们就有一种更好的选择，就是将外部的div替换为template模板，template最大的一个特点就是不影响结构。虽然我们使用template对h2进行了包裹，但是等最终渲染结束之后会将外部的template结构脱掉。我们可以试一下。

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>条件渲染</title>
    8.     <!--引入Vue-->
    9.     <script type="text/javascript" src="../js/vue.js"></script>
    10.     <style>
    11.        
    12.     </style>
    13. </head>
    14. <body>
    15.     <!--准备好一个容器-->
    16.     <div id="root">
    17.         <h2>当前的n值是: {{n}}</h2>
    18.         <button @click="n++">点我n+1</button>
    19.         <!-- 使用v-show做条件渲染  -->
    20.         <!-- <h2 v-show="show">欢迎学习{{name}}</h2> -->
    21.         <!-- <h2 v-show="1 === 1">欢迎学习{{name}}</h2> -->
    22.  
    23.         <!-- 使用v-if做条件渲染 -->
    24.         <!-- <h2 v-if="false">欢迎学习{{name}}</h2> -->
    25.         <!-- <h2 v-if="1 === 1">欢迎学习{{name}}</h2> -->
    26.  
    27.         <!-- <div v-if="n === 1">Angular</div>
    28.         <div v-else-if="n === 2">React</div>
    29.         <div>@@@</div>
    30.         <div v-else-if="n === 3">Vue</div>
    31.         <div v-else>哈哈</div> -->
    32.         <template v-if="n === 1">
    33.             <h2>你好</h2>
    34.             <h2>哈喽</h2>
    35.             <h2>Vue</h2>
    36.         </template>
    37.  
    38.     </div>
    39. </body>
    40.  
    41. <script type="text/javascript">
    42.     Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    43.     const vm = new Vue({
    44.         el:'#root',
    45.         data:{
    46.             name:'Vue',
    47.             show:false,
    48.             n:0
    49.         },
    50.         methods: {
    51.             
    52.         },
    53.     })
    54. </script>
    55. </html>

    实现效果：

    我们可以看到使用template包裹的原有结构并没有被破坏掉。

    但是这里需要注意的一点是：template只能和v-if配合使用，不能和v-show配合使用

    6.总结

    条件渲染：

            1.v-if

                    写法：

                            （1）v-if="表达式"

                            （2）v-else-if="表达式"

                            （3）v-else="表达式"

                    适用于：切换频率较低的场景。

                    特点：不展示的DOM元素直接被移除

                    注意：v-if可以和：v-else-if,v-else一起使用，但要求结构不能被打断。

            2.v-show

                    写法：v-show="表达式"

                    适用于：切换频率较高的场景。

                    特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉

            3.备注：使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到。

  • 相关阅读:
    NodeMCU ESP8266 外设的 Arduino API 接口介绍
    计算机网络(HTTPS)
    新增分组柱状图，DataEase开源数据可视化分析平台v1.14.0发布
    2022年最新最全软件测试面试题大全
    记录Apple MFI开发获取TOKEN全过程
    【手撕STL】bitset（位图）、布隆过滤器
    turtle库—图形绘制—Python标准库
    2023年【汽车驾驶员（中级）】报名考试及汽车驾驶员（中级）证考试
    第八单元 Linux系统引导过程及引导修复
    【JAVA项目实战】【图书管理系统】用户添加功能【Servlet】+【Jsp】+【Mysql】
  • 原文地址：https://blog.csdn.net/qq_37050372/article/details/125333996