vue 搜索框header_vue实现搜索功能

复制即可用

实现效果图

image.png

样式

/* 隐藏未编译的变量 */

[v-cloak] {

display: none;

}

*{

margin:0;

padding:0;

}

body{

font:15px/1.3 'Open Sans', sans-serif;

color: #5e5b64;

text-align:center;

}

a, a:visited {

outline:none;

color:#389dc1;

}

a:hover{

text-decoration:none;

}

section, footer, header, aside, nav{

display: block;

}

/*-------------------------

搜索输入框

--------------------------*/

.bar{

background-color:#5c9bb7;

background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);

background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);

background-image:linear-gradient(top, #5c9bb7, #5392ad);

box-shadow: 0 1px 1px #ccc;

border-radius: 2px;

width: 400px;

padding: 14px;

margin: 45px auto 20px;

position:relative;

}

.bar input{

background:#fff no-repeat 13px 13px;

background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU5NEY0RTlFMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU5NEY0RTlGMTA4NzExRTM5RTEzQkFBQzMyRjkyQzVBIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTk0RjRFOUMxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTk0RjRFOUQxMDg3MTFFMzlFMTNCQUFDMzJGOTJDNUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4DjA/RAAABK0lEQVR42pTSQUdEURjG8dOY0TqmPkGmRcqYD9CmzZAWJRHVRIa0iFYtM6uofYaiEW2SRJtEi9YxIklp07ZkWswu0v/wnByve7vm5ee8M+85zz1jbt9Os+WiGkYdYxjCOx5wgFeXUHmtBSzpcCGa+5BJTCjEP+0nKWAT8xqe4ArPGEEVC1hHEbs2oBwdXkM7mj/JLZrad437sCGHOfUtcziutuYu2v8XUFF/4f6vMK/YgAH1HxkBYV60AR31gxkBYd6xAeF3VzMCwvzOBpypX8V4yuFRzX2d2gD/l5yjH4fYQEnzkj4fae5rJulF2sMXVrAsaTWttRFu4Osb+1jEDT71/ZveyhouTch2fINQL9hKefKjuYFfuznXWzXMTabyrvfyIV3M4vhXgAEAUMs7K0J9UJAAAAAASUVORK5CYII=);

border: none;

width: 100%;

line-height: 19px;

padding: 11px 0;

border-radius: 2px;

box-shadow: 0 2px 8px #c4c4c4 inset;

text-align: left;

font-size: 14px;

font-family: inherit;

color: #738289;

font-weight: bold;

outline: none;

text-indent: 40px;

}

ul{

list-style: none;

width: 428px;

margin: 0 auto;

text-align: left;

}

ul li{

border-bottom: 1px solid #ddd;

padding: 10px;

overflow: hidden;

}

ul li img{

width:60px;

height:60px;

float:left;

border:none;

}

ul li p{

margin-left: 75px;

font-weight: bold;

padding-top: 12px;

color:#6e7a7f;

}

html

• {{article.title}}

js

data: {

searchString: "",

// 数据模型，实际环境你可以根据 Ajax 来获取

articles: [

{

"title": "What You Need To Know About CSS Variables",

"url": "https://www.runoob.com/css/css-tutorial.html",

"image": "https://static.runoob.com/images/icon/css.png"

},

{

"title": "Freebie: 4 Great Looking Pricing Tables",

"url": "https://www.runoob.com/html/html-tutorial.html",

"image": "https://static.runoob.com/images/icon/html.png"

},

{

"title": "20 Interesting JavaScript and CSS Libraries for February 2016",

"url": "https://www.runoob.com/css3/css3-tutorial.html",

"image": "https://static.runoob.com/images/icon/css3.png"

},

{

"title": "Quick Tip: The Easiest Way To Make Responsive Headers",

"url": "https://www.runoob.com/css3/css3-tutorial.html",

"image": "https://static.runoob.com/images/icon/css3.png"

},

{

"title": "Learn SQL In 20 Minutes",

"url": "https://www.runoob.com/sql/sql-tutorial.html",

"image": "https://static.runoob.com/images/icon/sql.png"

},

{

"title": "Creating Your First Desktop App With HTML, JS and Electron",

"url": "https://www.runoob.com/js/js-tutorial.html",

"image": "https://static.runoob.com/images/icon/html.png"

}

]

},

computed: {

// 计算数学，匹配搜索

filteredArticles: function () {

var articles_array = this.articles,

searchString = this.searchString;

if(!searchString){

return articles_array;

}

searchString = searchString.trim().toLowerCase();

articles_array = articles_array.filter(function(item){

if(item.title.toLowerCase().indexOf(searchString) !== -1){

return item;

}

})

// 返回过来后的数组

return articles_array;;

}

}