【前端】Vue.js实现实例搜索应用
实例搜索应用
实现效果：
实现代码与注释：
<!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"><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实现实例搜索应用的更多相关文章
- Web前端-Vue.js必备框架（二）
Web前端-Vue.js必备框架(二) vue调式工具vue-devtools 过滤器:vue.js允许你自定义过滤器,可被用作一些常见的文本格式化. mustache插值和v-bind表达式. vu ...
- Web前端-Vue.js必备框架（五）
Web前端-Vue.js必备框架(五) 页面组件,商品列表组件,详情组件,购物车清单组件,结算页组件,订单详情组件,订单列表组件. vue-router 路由 vuex 组件集中管理 webpack ...
- Web前端-Vue.js必备框架（三）
Web前端-Vue.js必备框架(三) vue是一款渐进式javascript框架,由evan you开发.vue成为前端开发的必备之一. vue的好处轻量级,渐进式框架,响应式更新机制. 开发环境, ...
- Web前端-Vue.js必备框架（一）
Web前端-Vue.js必备框架(一) <!DOCTYPE html> <html lang="en"> <head> <meta cha ...
- Web前端-Vue.js必备框架（四）
Web前端-Vue.js必备框架(四) 计算属性: <div id="aaa"> {{ message.split('').reverse().join('') }} ...
- 前端——Vue.js学习总结一
一.什么是Vue.js 1.Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架 2.Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端 ...
- Vue.js + Seajs 实例（包含vue-router使用）
这个Demo 相关JS: Sea.js : Version 2.3.0 seajs-text : Version 2.3.0 vue.js : Version 1.0.24 vue-router: ...
- 偏前端-vue.js学习之路初级（二）组件化构建
vue.js 组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...
- 偏前端-vue.js学习之路初级（一）概念
首先--不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于 Node.js 的构建工具时. 新建一个html,引入一下js: <!-- 开发环境版本,包含了有帮助的命令行警告 -- ...
随机推荐
- queue hardware os
Computer Science An Overview 11th Edition Queues are often used as the underlying structure of a buf ...
- 2018/03/25 每日一个Linux命令 之 df
Linux df命令用于显示目前在Linux系统上的文件系统的磁盘使用情况统计. 就像在windows下打开我的电脑一样会统计各个磁盘一样的情况 主要用于查看磁盘空间占用情况 -- [@hong:~] ...
- Balls and Boxes---hdu5810（推公式）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5810 有n个球m个盒子,随机把球放到盒子中,求每个盒子球个数的方差的期望值 E[V]; 推公式吧,或者 ...
- lua打包exe【转】
可以使用srlua这个工具把lua脚本打包成exe,提供了lua 5.2.5.1.5.0的版本对应的源码. 不过我懒得编译了,发现“白的菜”替懒人编译好了(感谢),点击下载. 解压后出现“luapac ...
- OA系统部署短信过程
安装dotNetFx40_Client_setup.exe插件 安装mysql_installer_community_V5.6.21.1_setup.1415604646.msi数据库 根据数据库版 ...
- 解决idea工具下tomcat中文乱码问题
在运行/调试 配置对话框的Startup/Connection面板中, 勾选Pass environment variables. 并添加一个environment variable, Name填 J ...
- [javascript]编码&i字符串格式化&nput历史记录&清空模态框
js中编码问题 https://www.haorooms.com/post/js_escape_encodeURIComponent 我在前端js添加时候创建dom时候,有汉字,发现是乱码就研究了下 ...
- 蒙特卡洛模拟（Monte Carlo simulation）
1.蒙特卡罗模拟简介 蒙特卡罗模拟,也叫统计模拟,这个术语是二战时期美国物理学家Metropolis执行曼哈顿计划的过程中提出来的,其基本思想很早以前就被人们所发现和利用.早在17世纪,人们就知道用事 ...
- 自动生产jason的工具
EnjoySR/ESJsonFormat-Xcode
- android开发中遇到的一些问题
buildToolsVersion 设置buildtool版本 今天遇到一个奇怪问题instant not supported 原来是设置显示offline...这个很无语,adb devices又能 ...