Vue 12 - 条件渲染 v-show v-if

目录

v-show和v-if介绍

v-if 和v-else-if介绍

小功能展示

代码演示

结果截图

本章总结

其他总结： 

---

v-show和v-if介绍

v-show 和 v-if 是 Vue.js 框架中两个用于条件渲染的指令。

v-show 指令用于根据表达式的值来显示或隐藏元素，它只是简单的控制 CSS 的 display 属性。当表达式的值为真时，元素会被显示；当表达式的值为假时，元素会被隐藏。

例如，以下代码将根据 isShow 变量的值显示或隐藏一个 div 元素：

这个元素将被显示或隐藏

v-if 指令也用于根据表达式的值来决定是否渲染元素，但是它和 v-show 不同的是，它会实际地从 DOM 中添加或删除元素。当表达式的值为真时，元素会被渲染；当表达式的值为假时，元素将从 DOM 中移除。

例如，以下代码将根据 isShow 变量的值渲染或删除一个 div 元素：

这个元素将被渲染或删除

需要注意的是，由于 v-if 指令会在需要时添加或删除元素，因此相比于 v-show，它的性能消耗更大。因此，在大多数情况下，如果需要频繁切换元素的可见性，建议使用 v-show；而如果只需要在特定情况下添加或删除元素，可以考虑使用 v-if。

v-if 和v-else-if介绍

v-if 和 v-else-if 指令可以一起使用，用于根据多个条件来渲染不同的元素。当第一个条件为真时，渲染第一个元素；当第一个条件为假且第二个条件为真时，渲染第二个元素；以此类推。最后，如果所有条件都为假，则不渲染任何元素。

以下是使用 v-if 和 v-else-if 的示例代码：

在上面的示例中，当 condition 变量的值为 'A' 时，第一个元素将被渲染；当 condition 变量的值为 'B' 时，第二个元素将被渲染；当 condition 变量的值为 'C' 时，第三个元素将被渲染；当 condition 变量的值既不是 'A'、'B'、'C' 时，最后一个元素将被渲染。

需要注意的是，v-if 和 v-else-if 指令必须在同一元素上使用，而且它们的顺序很重要，必须按照从上到下的顺序排列。同时，每个元素只会被渲染一次，只有符合条件的元素会被渲染，其他元素将被忽略。

小功能展示

1. 用v-if， v-else控制一个两个不同的div，当双数的时候就输出喜欢的电视剧是狂飙，当单数的时候就输出喜欢的电视剧是他是谁。

2. 当前有个默认n=0的数字，当按钮点击的时候会做+1的动作，结果记录在页面上。

3.点击三次之内，第一次时候输出张译张颂文，第二次时候输出张译，第三次时候输出还是张译。

要求：使用v-show和v-if实现

代码演示

    
    
    



    

        
        
我喜欢电视剧 {{name}}
        
        
这部更好看，{{name2}}

        
当前的n的值是{{n}}
        点我n+1

        
        
张译，张颂文
        
张译
        
还是张译


    

结果截图

 

 

本章总结

v-show和v-if是Vue.js中用于控制元素显示的指令。

v-show根据绑定的表达式的值来决定元素是否显示，如果表达式的值为真，元素将显示；如果为假，元素将隐藏。与v-if不同，v-show只是在元素上设置了display:none样式来隐藏元素，但是元素仍然存在于DOM中。当需要频繁切换元素的显示和隐藏时，v-show的性能更好。

v-if也是根据绑定的表达式的值来决定元素是否显示，但是与v-show不同，如果表达式的值为假，元素将从DOM中移除，如果表达式的值为真，元素将被重新插入到DOM中。由于v-if会在元素的显示和隐藏之间切换DOM结构，因此在性能方面可能会比v-show差一些。但是在需要条件渲染的情况下，v-if更加灵活和安全。

其他总结： 

可以看一下这两部电视剧。。。。