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 编程引入命名空间的方法与代码
Aug 13 Javascript
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
js中的eventType事件及其浏览器支持性介绍
Nov 29 Javascript
jQuery实现文档树效果
Feb 20 Javascript
Angular2自定义分页组件
Apr 19 Javascript
面包屑导航详解
Dec 07 Javascript
基于JavaScript实现简单的音频播放功能
Jan 07 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
详解vuex commit保存数据技巧
Dec 25 Javascript
JS左右无缝轮播功能完整实例
May 16 Javascript
koa router 多文件引入的方法示例
May 22 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
造就帕卡马拉的帕卡斯是怎么被发现的
2021/03/03 咖啡文化
比较全面的PHP数组的使用方法小结
2010/09/23 PHP
帝国cms常用标签汇总
2015/07/06 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
PHP生成腾讯云COS接口需要的请求签名
2018/05/20 PHP
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
2008/03/22 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
AngularJS 实现弹性盒子布局的方法
2016/08/30 Javascript
JS实现一个简单的日历
2017/02/22 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
Angularjs之ngModel中的值验证绑定方法
2018/09/13 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
numpy concatenate数组拼接方法示例介绍
2019/05/27 Python
python switch 实现多分支选择功能
2020/12/21 Python
行政经理岗位职责
2013/11/09 职场文书
自主招生自荐信指南
2014/02/04 职场文书
女娲补天教学反思
2014/02/05 职场文书
买房协议书
2014/04/11 职场文书
公司租房协议书
2014/10/14 职场文书
医生辞职信范文
2015/03/02 职场文书
离婚律师函范本
2015/05/27 职场文书
国博复兴之路观后感
2015/06/02 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
2019消防宣传标语!
2019/07/10 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
基于Golang 高并发问题的解决方案
2021/05/08 Golang
学习nginx基础知识
2021/09/04 Servers
Python实现Excel文件的合并(以新冠疫情数据为例)
2022/03/20 Python