html
<ul class="flex head">
<li @click="flag=1" :class="{active:flag==1}">
<span>登录</span>
<img v-show="flag==1" src="@img/login/[email protected]" alt>
</li>
<li @click="flag=2" :class="{active:flag==2}">
<span>注册</span>
<img v-show="flag==2" src="@img/login/[email protected]" alt>
</li>
</ul>
<div class="login" v-show="flag==1"></div>
<div class="register" v-show="flag==2"></div>
css
.head {
margin: 30px 150px;
li {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
font-size: 34px;
color: rgba(153, 153, 153, 1);
&.active {
font-size: 48px;
color: rgba(248, 97, 40, 1);
}
img {
width: 120px;
height: 10px;
}
}
js
data() {
return {
flag: 1
};
}