vue基础：v-if实现登录方法转换

最新推荐文章于 2024-06-27 13:54:12 发布

zzのpara

最新推荐文章于 2024-06-27 13:54:12 发布

阅读量653

点赞数

分类专栏：前端基础文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/paradoxzl/article/details/125778638

版权

本文介绍了Vue.js中v-if指令的使用，通过v-if实现登录状态的条件渲染，详细讲解了v-if、v-else-if和v-else的用法，帮助理解如何根据表达式控制DOM元素的显示与隐藏。

摘要由CSDN通过智能技术生成

v-if指令根据表达式值的真假，切换元素的显示和隐藏，其实是在操作dom元素;

v-if = "表达式" ：表示如果表达式为真，则显示该标签

v-else-if = "表达式" :必须在if后。如果if内的表达式为false,则判断else-if内的表达式。如果表达式为真，则显示改标签。也可以没有

v-else: 表示除if ,else if之外。上述两个都为false，则显示该标签。

<div id="login">
    <template v-if="loginType">
        <label>账号登陆：</label><br>
        <input placeholder="输入账号、密码"><br>
    </template>

    <template v-else>
        <label>手机登陆：</label><br>
        <input placeholder="输入手机号、验证码"><br>
    </template>

    <button @click="changeLogin">切换登陆方式</button>
</div><br><br>
<script>
    let v3 = new Vue({
        el: '#login',
        data:{
            loginType:true
        },
        methods:{