v-show和v-if介绍

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

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

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

<div v-show="isShow">这个元素将被显示或隐藏</div>

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

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

<div v-if="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 的示例代码：

        <template>
            <div>
                <div v-if="condition === 'A'"> 这个元素将在条件 A 成立时渲染 </div>
                <div v-else-if="condition === 'B'"> 这个元素将在条件 B 成立时渲染 </div>
                <div v-else-if="condition === 'C'"> 这个元素将在条件 C 成立时渲染 </div>
                <div v-else> 这个元素将在所有条件都不成立时渲染 </div>
            </div>
        </template>

在上面的示例中，当 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实现

代码演示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <!-- 使用v-show做条件渲染 -->
        <h2 v-if="n%2===1">我喜欢电视剧 {
   
   {name}}</h2>
        <!-- 使用v-if做条件渲染 -->
        <h2 v-else>这部更好看，{
   
   {name2}}</h2>

        <h2>当前的n的值是{
   
   {n}}</h2>
        <button v-on:click="addN">点我n+1</button>

        <!-- n=1时，显示div1, 使用v-show演示 -->
        <div v-show="n===1">张译，张颂文</div>
        <div v-show="n===2">张译</div>
        <div v-show="n===3">还是张译</div>


    </div>

</body>
<script>
    Vue.config.productionTip = false // 阻止vue在启动时生成生产提示
    const vm = new Vue({
        el: '#root',
        data:{
            name:'狂飙',
            name2:'他是谁',
            n:0
        },
        methods: {
            addN(){
                this.n++;
            }
        },
    })
</script>

</html>

结果截图

本章总结

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更加灵活和安全。

其他总结：

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

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