v-if小案例---实现点击切换登录方式

最新推荐文章于 2022-11-20 19:00:49 发布

万事胜意sy

最新推荐文章于 2022-11-20 19:00:49 发布

阅读量423

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_50736511/article/details/112302295

版权

笔记专栏收录该内容

469 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="div">
 <form action="">
<label for="input" v-if="index==true">用户名登陆</label>
<label for="input" v-else-if="index==false">电子邮箱登陆</label>
<br>  
<input type="text" id='input'> 
<p style="font-size: 3px;display: inline;cursor: pointer;" @click='change'> 切换登陆方式 </p>
<br>
<p style="display: inline;">密码</p>
<br>
<input type="password" id='input'>
</form>                                     
</div>
</body>
</html> 
<script src="vue.js"></script>
<script>
   const app=new Vue({
       el:'#div',
       data:{
           index:true,
           num:1
       },
       methods:{
           change(){
              
                this.num++;
                if(this.num%2==1){
                   this.index=true
                }  
                else{
                    this.index=false
                }
                console.log(this.num);
                console.log(this.index);
               
           }
       }
   })
</script>