12vue学习_v-if和v-else 修饰符的使用_v-else-if 也会直接挂载吗-优快云博客

本文链接：https://blog.youkuaiyun.com/chencaw/article/details/113460273

本文介绍了Vue.js中条件渲染的几个关键指令：v-if用于条件性显示元素，v-else提供与v-if配套的否定条件，v-else-if则用于多个条件判断。通过示例展示了如何根据分数显示不同的评价等级。此外，还探讨了用户登录方式切换的场景，演示了如何根据变量isUser动态切换账号和邮箱输入框的显示。

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

1、v-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
    <h2 v-if = "isShow">
        <div>abb</div>
        <div>abb</div>
        <div>abb</div>
        {{message}}
    </h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                isShow: true
            }
        })
    </script>
</body>

2、V-else的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
    <h2 v-if = "isShow">
        <div>abb</div>
        <div>abb</div>
        <div>abb</div>
        {{message}}
    </h2>
    <h1 v-else>isShow 为False</h1>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                isShow: true
            }
        })
    </script>
</body>

3、v-else-if的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
        <h2 v-if = "score>=90">优秀</h2>
        <h2 v-else-if="score>=80">良好</h2>
        <h2 v-else-if="score>=60">及格</h2>
        <h2 v-else>不及格</h2>

        <!-- 下面方法更好 -->
        <h1>{{result}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                score: 99
            },
            computed:{
                result(){
                    let showMessage = '';
                    if(this.score>=90){
                        showMessage = '优秀'
                    }
                    else if(this.score>=80)
                    {
                        showMessage = '良好'
                    }
                    else if(this.score>=60)
                    {
                        showMessage = '及格'
                    }
                    else{
                        showMessage = '不及格'
                    }
                    return showMessage
                }
            }
        })
    </script>
</body>

4、用户登录方式切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title-hellovuejs</title>
</head>
<body>
    <div id ="app">
    <span v-if="isUser">
        <label for="username">用户账号</label>
        <input type="text" id="username" placeholder="用户账号">
    </span>
    <span v-else>
        <label for="email">用户邮箱</label>
        <input type="text" id="email" placeholder="用户邮箱">
    </span>
    <button @click="isUser = !isUser">切换类型</button>    
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let（变量） /const（常亮）
        const chen1 = new Vue({
            el: '#app',  //用于挂载要管理的元素
            data:{//定义数据
                message:'你好啊，helloword',
                isUser: true
            }
        })
    </script>
</body>