举例详解：v-if（v-else v-else-if )和v-show的区别【内含成绩评测实例】

本文链接：https://blog.youkuaiyun.com/Gobiggerr/article/details/110695793

本文深入探讨了Vue中v-if、v-else和v-show的使用区别，通过实例展示了它们在控制元素显示与隐藏时的不同策略。v-if基于条件创建和销毁元素，而v-show则是通过修改display样式实现隐藏。同时，文章提供了一个成绩评判的代码示例，解释了在不同分数输入下如何运用这两个指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-if和v-show的区别

一、v-if、v-else和v-show指令

v-if和v-else就是用于多个元素，通过条件判断展示或者隐藏某个元素
v-show指令是根据表达式的值来显示或隐藏某个元素，当v-show的值为true时，元素显示；如果v-show值为false时，元素隐藏
例如：

     <div id="app">
        <div v-if='ttt'>当ttt为true时显示(这是if和else)</div>
        <div v-else>当ttt为false时显示(这是if和else)</div>
        <div v-show='ttt'>当ttt为true时(这是show)</div>
    </div>
    <script src="vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                ttt: false
            }
        })
    </script>

当data: { ttt: true }时，结果如下：

运行结果

当data: { ttt: false }时，结果如下：
运行结果

当为“false”查看控制台结果如下：

可以发现对于v-show指令，元素隐藏时，只是增加了display:none的样式，而 v-if 指令则直接通过把<div v-if='ttt'>当ttt为true时显示(这是if和else)</div>该行删除来实现了隐藏效果

二、实例：运用v-if（v-else v-else-if )和v-show写一个成绩评判

代码如下：

    <div id="app">
        <input type="text" v-model="n1">
        <div v-show='flag' v-if='n1>=90'>你太牛x了</div>
        <div v-show='flag' v-else-if='n1<90&&n1>=80'>优秀</div>
        <div v-show='flag' v-else-if='n1<80&&n1>=60'>一般</div>
        <div v-show='flag' v-else>差</div>
        <button v-on:click='btn1'>评测</button>
    </div>
    <script src="vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                n1:0,
                flag: false
            },
            methods: {
                btn1: function () {
                    this.flag = !this.flag;
                }
            }
        })
    </script>