v-if

v-else和v-else-if

1.作用：辅助v-if进行判断渲染

2.语法：

v-else：

v-else

后面不需要加任何语句

v-else-if：

v-else-if="表达式"

注意事项：

1.v-if是如果的意思

条件为：true会渲染

条件为：false不渲染

2.v-else是v-if的否则

不能加任何语句

只能在v-if或v-else-if后面立刻使用（中间不能插入任何东西

）同时v-else不能单独使用

代码案例展示

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p v-if="gender ===1">性别♂男</p>
        <p v-else>性别♀女</p>
        <hr>
        <p v-if = 'shuzi>=90'>成绩评定A：奖励电脑一台</p>
        <p v-else-if="shuzi>=80">成绩评定：B奖励周末郊游</p>
        <p v-else-if=" shuzi>=60">成绩评定：C奖励零食礼包</p>
        <p v-else>成绩评定：D惩罚一周不能玩手机</p>
    </div>



    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        // 引入核心包以后，在全局环境中就有了Vue构造函数
        // 3.创建实例
        const app = new Vue({
            //这里通过el配置标签 
            el: '#app',
            //通过data提        供数据来渲染标签
            data: {
                gender: 2,
                shuzi:90
            }
        })

    </script>
</body>

</html>

v-if

posted @ 2025-12-08 19:44  scxlzb  阅读(0)  评论(0)    收藏  举报