<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
ul li {
list-style: none;
display: inline-block;
border: 1px solid dodgerblue;
height: 30px;
line-height: 30px;
width: 120px;
text-align: center;
cursor: pointer;
}
.cl{
color: #ffffff;
background: #000;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li @click="temp = true" :class="{'cl':temp}">
<span >二维码登录</span>
</li>
<li @click="temp = false" :class="{'cl':!temp}">
<span >邮箱登录</span>
</li>
</ul>
<div style="margin-left:80px" v-if="temp">
<img src="" alt="2132132">
</div>
<div style="margin-left:80px" v-if="!temp">
<form action="https://mail.163.com/" method="post">
<p><input type="email"></p>
<p><input type="password"></p>
<p><input type="submit" value="登录"></p>
</form>
</div>
</div>
<script>
new Vue({
el: '#box',
data: {
temp:true
}
})
</script>
</body>
</html>
1535
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
