Vue.js实现实例搜索应用功能详细代码


Posted in Javascript onAugust 24, 2017

实例搜索应用

实现效果:

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" 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实现实例搜索应用功能详细代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript时间函数基础介绍
Mar 28 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
Mar 02 Javascript
jQuery实现可用于博客的动态滑动菜单
Mar 09 Javascript
原生JS:Date对象全面解析
Sep 06 Javascript
JS动态给对象添加属性和值的实现方法
Oct 21 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
Vue 实现点击空白处隐藏某节点的三种方式(指令、普通、遮罩)
Oct 23 Javascript
node.js制作一个简单的登录拦截器
Feb 10 Javascript
JavaScript实现刮刮乐效果
Nov 01 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 #Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 #Javascript
使用jquery+iframe做一个ajax上传效果(实例)
Aug 24 #jQuery
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 #Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 #Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 #Javascript
vue不通过路由直接获取url中参数的方法示例
Aug 24 #Javascript
You might like
DedeCms模板安装/制作概述
2007/03/11 PHP
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
CI框架入门之MVC简单示例
2016/11/21 PHP
laravel excel 上传文件保存到本地服务器功能
2019/11/14 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
JS 文件传参及处理技巧分析
2010/05/13 Javascript
在父页面调用子页面的JS方法
2013/09/29 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
jquery实现简单合拢与展开网页面板的方法
2015/09/01 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
ES6 迭代器(Iterator)和 for.of循环使用方法学习(总结)
2018/02/08 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
[02:04]2016国际邀请赛中国区预选赛VG.R晋级之路
2016/07/01 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
用python 制作图片转pdf工具
2015/01/30 Python
http请求 request失败自动重新尝试代码示例
2018/01/25 Python
Python中的上下文管理器相关知识详解
2019/09/19 Python
使用python turtle画高达
2020/01/19 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
销售类个人求职信范文
2013/09/25 职场文书
爸爸的花儿落了教学反思
2014/02/20 职场文书
护士感人事迹
2014/05/01 职场文书
新教师培训心得体会
2014/09/02 职场文书
村党建工作汇报材料
2014/11/02 职场文书
2015年物业管理工作总结
2015/04/23 职场文书
2019年度政务公开考核工作总结模板
2019/11/11 职场文书
vue 实现上传组件
2021/05/31 Vue.js