Vue.js实现实例搜索应用功能详细代码
程序员文章站
2022-11-26 11:16:07
实例搜索应用
实现效果：
实现代码与注释：
&l...
实例搜索应用
实现效果：
实现代码与注释：
<!doctype html>
<html>
<head>
<title>实例搜索</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
/* 隐藏没有绑定未编译的数据绑定，直到vue实例加载 */
[v-cloak]{
display: none;
}
*{
padding: 0;
margin: 0;
}
body{
font: 15px/1.3 'open sans' sans-serif;
color: #03c03c;
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: #03c03c;
background-image:-webkit-linear-gradient(top, #03c03c, #00ed47);
background-image:-moz-linear-gradient(top, #03c03c, #00ed47);
background-image:linear-gradient(top, #03c03c, #00ed47);
box-shadow: 0 1px 1px #ccc;
border-radius: 5px;
width: 400px;
padding: 10px;
margin: 45px auto 20px;
position: relative;
}
.bar input{
background: #fff no-repeat 13px 13px;
/* search bar */
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: #03c03c;
font-weight: bold;
text-indent: 40px;
outline: none;
}
input:focus{
box-shadow: -2px -2px 3px hsla(100, 0%, 0%, 0.3)
}
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;
}
</style>
</head>
<body>
<form id="main" v-cloak>
<div class="bar">
<!-- create a binding between the searchstring model and the text field -->
<input type="text" v-model="searchstring" placeholder="enter your search terms" />
</div>
<ul>
<!-- render a li element for every entry in the computed filteredarticles array. -->
<li v-for="article in filteredarticles">
<a v-bind:href="article.url" rel="external nofollow" ><img v-bind:src="article.image" /></a>
<p>{{article.title}}</p>
</li>
</ul>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.5/vue.min.js"></script>
<script>
var demo = new vue({
el: '#main',
data: {
searchstring: "",
// the data model. these items would normally be requested via ajax,
// but are hardcoded here for simplicity.
articles: [
{
"title": "what you need to know about css variables",
"url": "http://tutorialzine.com/2016/03/what-you-need-to-know-about-css-variables/",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcqmbum7hljpdelwq0bso01for8ed0wcxqahv9jhq-_pzrh6wf91"
},
{
"title": "freebie: 4 great looking pricing tables",
"url": "http://tutorialzine.com/2016/02/freebie-4-great-looking-pricing-tables/",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gctbh-xaqqdlwpr_nig66fspeya2qvsaozmwn6rngik7aighxbei"
},
{
"title": "20 interesting javascript and css libraries for february 2016",
"url": "http://tutorialzine.com/2016/02/20-interesting-javascript-and-css-libraries-for-february-2016/",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcqwibs1cmj4qevkrqe4c_a_rz_hjvkhrkudcbctgeri7kmw0ypjsg"
},
{
"title": "quick tip: the easiest way to make responsive headers",
"url": "http://tutorialzine.com/2016/02/quick-tip-easiest-way-to-make-responsive-headers/",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcqltg_0pzwsxobeig7iqnwbruki9wgxt2azhr1bzm7mim2tmdh0ca"
},
{
"title": "learn sql in 20 minutes",
"url": "http://tutorialzine.com/2016/01/learn-sql-in-20-minutes/",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcrzaahyhfl4nobdtmsgdoeuovpeptrwqtlvmiucyf0jfg4bw-pa4a"
},
{
"title": "creating your first desktop app with html, js and electron",
"url": "http://tutorialzine.com/2015/12/creating-your-first-desktop-app-with-html-js-and-electron/",
"image": "https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcqapr5hqb7ibdddfcxrprwlk60yfbk9doxpahcac_4rdl27syj-"
}
]
},
computed: {
// a computed property that holds only those articles that match the searchstring.
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 an array with the filtered data.
return articles_array;;
}
}
});
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的vue.js实现实例搜索应用功能详细代码，希望对大家有所帮助