Vue小demo—美团注册页面_background-color ease-CSDN博客

本文链接：https://blog.csdn.net/sinat_50265804/article/details/122893913

本文介绍了使用Vue.js实现美团注册页面的一些核心功能，包括输入框聚焦边框变色、提示字符的显示与隐藏、圆形复选框及其选中状态改变。通过Vue的v-for循环和条件语句v-show简化HTML结构，以及利用CSS实现动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、目标效果

效果图展示

实现原理

1.输入框聚焦时边框变色

使用CSS的:focus选择器，轻松实现元素聚焦时改变样式。

//用法示例
<!DOCTYPE html>
<html>
<head>
<style>
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>

<p>在文本框中点击，您会看到黄色的背景：</p>

<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>

<p><b>注释：</b>如果 :focus 用于 IE8 ，则必须声明 <!DOCTYPE>。</p>

</body>
</html>

2.输入框后面的提示字符的隐藏与展示

Vue的条件语句v-show可以根据条件选择展示或隐藏内容，我们直接在标签中写入v-show="ok"，通过控制ok的值从而决定元素的展示或隐藏，当ok:true时展示，当ok:false时隐藏。

//用法示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <h1 v-show="ok">Hello!</h1>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>
</body>
</html>

3.复选框为圆形，选中时样式改变

就一个选项，为什们要使用复选框呢，使用单选框不好吗？最开始我使用的是单选框，<input type="radio">,我发现选中后就不能取消选中了，而<input type="checkbox"则可以解决这个问题，可以任性的选中和取消选中。那么接下来要把选项框变成圆形，设置border-radius:50%;，选中时变色，设置.accept:checked {background: #fed100;}，注意accept只是我自定义的复选框元素类名。最后，还要实现选中时出现对勾的效果，我使用了伪类:after，通过在复选框accept后面添加一个背景色透明的元素，并给它设置左、下为黑色边框，右、上border:none;注意，这里我们要使用绝对定位，不然的话对勾就跑到复选框外面去了。

.accept:checked {
	background: #fed100;
}
.a