vue学习吧（八） v-if（v-else-if v-else） v-show_通过v-if指令实现下面的效果: (1) 通过条件渲染指令判定成绩等级的输出结果-优快云博客

本文通过实例演示了Vue.js中v-if与v-show指令的区别及其使用场景，详细介绍了如何利用这些指令实现元素的条件渲染，包括单一条件和多个条件的情况。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">

        <button @click="handleIf">v-if</button>  <button @click="handleShow">v-show</button>  <button @click="handleShowB">v-if-b</button><button @click="handleShowC">v-if-c</button>
        <div v-if="ifShow" style="width: 100px;height: 100px;background-color: red" >v-if</div>
        <div v-show="show" style="width: 100px;height: 100px;background-color: black" >v-show</div>

        <div v-if="value=='a'" style="width: 100px;height: 100px;background-color: green" >v-if-a</div>
        <div v-else-if="value=='b'" style="width: 100px;height: 100px;background-color: red" >v-if-b</div>
        <div v-else style="width: 100px;height: 100px;background-color: orange" >v-if -c</div>
    </div>

    <script>
        var app=new Vue({
            el:"#app",
            data:{
                content:'hello vue',
                ifShow:false,
                show:false,
                value:'a'
            },
            methods:{
                handleIf:function () {
                    this.ifShow=!this.ifShow
                },
                handleShow:function () {
                    this.show=!this.show
                },
                handleShowB:function () {
                    this.value='b'
                },
                handleShowC:function () {
                    this.value='c'
                }
            }
        })
    </script>
</body>
</html>