Vue条件指令v-if即v-else的使用

最新推荐文章于 2024-07-19 10:04:44 发布

DangR-Jisoo

最新推荐文章于 2024-07-19 10:04:44 发布

阅读量934

点赞数

分类专栏： Vue 前端

本文链接：https://blog.csdn.net/Angela_Connie/article/details/114296270

版权

前端同时被 2 个专栏收录

45 篇文章 2 订阅

订阅专栏

Vue

18 篇文章 2 订阅

订阅专栏

Vue条件指令v-if即v-else的使用

Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
当v-if为true时，其所在的元素被渲染，则v-else所在的元素不被渲染
举个简单的例子

<body>
    <div id="app">
        <h2 v-if="true">{{message}}</h2>
        <h1 v-else>我是男生</h1>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "我是女生"
            }
        })
    </script>
</body>

上面的代码中<h2>中的v-if对应的值为true，所以"我是女生"被渲染，如下图所示
在这里插入图片描述

<body>
    <div id="app">
        <h2 v-if="false">{{message}}</h2>
        <h1 v-else>我是男生</h1>
    </div>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "我是女生"
            }
        })
    </script>
</body>

但如果将v-if的值设置为false，<h1 v-else>我是男生</h1>就会被渲染，如下图所示：
在这里插入图片描述
4. 条件指令还包括v-else-if，但平时使用较少，大家可以参考if else else if来进行学习，在这里不举例子了
5. 案例：切换登陆状(点击切换按钮由用户账号登录变为用户邮箱登录，如此切换)

<body>
    <div id="app">
        <span v-if="yes">
            <label for="num">用户账号</label>
            <input type="text" id="num" placeholder="用户账号" key="num">
        </span>
        <span v-else>
            <label for="email">用户邮箱</label>
            <input type="text" id="email" placeholder="用户邮箱" key="email">
        </span>
        <!-- <button @click="yes=!yes">点击切换登陆方式</button> -->
        <button @click="toggle()">点击切换登陆方式</button>
    </div>
    <script>
        const app = new Vue({
                el: "#app",
                data: {
                    message: "用户账号",
                    yes: true
                },
                methods: {
                    toggle() {
                        this.yes = !this.yes;
                    }
                },
            })
    </script>
</body>

DangR-Jisoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue条件指令v-if即v-else的使用

Vue条件指令v-if即v-else的使用Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件当v-if为true时，其所在的元素被渲染，则v-else所在的元素不被渲染举个简单的例子<body> <div id="app"> <h2 v-if="true">{{message}}</h2> <h1 v-else>我是男生</h1> </div>
复制链接

扫一扫

专栏目录