基于Vue.js 2.0实现百度搜索框效果
(编辑：jimmy 日期: 2024/11/15 浏览：3 次 )
使用Vue.js 2.0 模仿百度搜索框效果，供大家参考，具体内容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=2.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Vue模拟百度搜索</title>
<style type="text/css">
body, html{
padding: 0;
margin: 0;
}
#box{
margin-top: 80px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.input{
width: 500px;
height: 30px;
text-indent: 4px;
}
.baidu input{
height: 30px;
cursor: pointer;
color: #fff;
letter-spacing: 1px;
background: #3385ff;
border: 1px solid #2d78f4;
}
ul{
padding: 0;
margin-top: 6px;
}
li{
list-style: none;
margin: 4px;
}
li:hover{
background: #ccc;
}
.bgcolor {
background: #ccc;
}
</style>
<script src="/UploadFiles/2021-04-02/vue.min.js">
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
下一篇：JavaScript闭包的简单应用