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 相关文章推荐
几个高效,简洁的字符处理函数
Apr 12 Javascript
一个XML格式数据转换为图表的例子
Feb 09 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
详解JavaScript中undefined与null的区别
Mar 29 Javascript
javascript实现五星评分功能
Nov 10 Javascript
深入理解Javascript中的自执行匿名函数
Jun 03 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
详解Angular 4.x 动态创建组件
Apr 25 Javascript
jquery鼠标悬停导航下划线滑出效果
Sep 29 jQuery
微信小程序获取手机号授权用户登录功能
Nov 09 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 Javascript
Node.js HTTP服务器中的文件、图片上传的方法
Sep 23 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
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
PHP多线程抓取网页实现代码
2010/07/22 PHP
php 判断访客是否为搜索引擎蜘蛛的函数代码
2011/07/29 PHP
才发现的超链接js导致网页中GIF动画停止的解决方法
2007/11/02 Javascript
百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome
2010/04/13 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
js切换光标示例代码
2013/10/10 Javascript
JS判断是否360安全浏览器极速内核的方法
2015/01/29 Javascript
js拆分字符串并将分割的数据放到数组中的方法
2015/05/06 Javascript
JQuery 传送中文乱码问题的简单解决办法
2016/05/24 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
Node.js使用Express.Router的方法
2017/11/14 Javascript
jQuery Validate插件ajax方式验证输入值的实例
2017/12/21 jQuery
基于axios 的responseType类型的设置方法
2019/10/29 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
[01:14]3.19DOTA2发布会 三代刀塔人第二代
2014/03/25 DOTA
用Python制作简单的钢琴程序的教程
2015/04/01 Python
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
利用python实现简单的邮件发送客户端示例
2017/12/23 Python
Django 路由控制的实现
2019/07/17 Python
使用Python自动生成HTML的方法示例
2019/08/06 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
Python class的继承方法代码实例
2020/02/14 Python
python 使用xlsxwriter循环向excel中插入数据和图片的操作
2021/01/01 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
党的群众路线学习材料
2014/05/16 职场文书
药剂专业求职信
2014/06/20 职场文书
学生吸烟检讨书
2014/09/14 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
库房管理员岗位职责
2015/02/12 职场文书
工会工作个人总结
2015/03/03 职场文书
蜗居观后感
2015/06/11 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
JavaScript的function函数详细介绍
2021/11/20 Javascript