vue基础案例4 - 即时搜索

最新推荐文章于 2024-03-12 08:35:28 发布
UIEngineer
最新推荐文章于 2024-03-12 08:35:28 发布
阅读量865
点赞数
分类专栏： vue框架
vue框架专栏收录该内容
41 篇文章 2 订阅
订阅专栏
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>




    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
        [v-cloak]{
            display:none;
        }

        *{
            margin: 0;
            padding: 0;
        }

        body{
            font: 15px/1.3 'Open Sans',sans-serif;
            color: #5e5b64;
            text-align: center;
        }

        a,a:visited{
            outline: none;
            color: #389dc1;
        }
        a:hover{
            text-decoration: none;
        }

        section,footer,header,aside,nav{
            display: block;
        }

        .bar{
            background: #5c9bb7;

            background-image:-webkit-linear-gradient(top,#5c9bb7,#5392ad);
            background-image:-moz-linear-gradient(top,#5c9bb7,#5392ad);
            background-image:linear-gradient(top,#5c9bb7,#5392ad);

            box-shadow: 0 1px 1px #ccc;
            border-radius: 2px;
            width: 400px;
            padding: 14px;
            margin: 45px auto 20px;
            position: relative;
        }

        .bar input{
            background: #fff no-repeat 13px 13px;
            /*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: #738289;
            font-weight: bold;
            outline: none;
            text-indent: 40px;
        }

        ul{
            list-style: none;
            width: 428px;
            margin: 0 auto;
            text-align: left;
        }

        ul li{
            border-bottom: 1px solid #ddd;
            padding: 10px;
            overflow: hidden;
            border: none;
        }

        ul li img{
            width: 60px;
            height: auto;
            float: left;
        }

        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">
            <input type="text" v-model="searchString" placeholder="请输入你的搜索词..." />

        </div>

        <ul>
            <!-- searchString为函数参数 -->
            <li v-for="i in articles | searchFor searchString">     
                <a v-bind:href="i.url">
                    <img v-bind:src="i.image" />
                    <p>{{i.title}}</p>
                </a>
            </li>
        </ul>

    </form>





   <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.16/vue.js"></script>

   <script>
    // 自定义过滤器，注意该处的value指的是数组articles
    Vue.filter('searchFor',function(value,searchString){
        // console.log(value);
        // console.log(searchString);

        var result = [];

        if(!searchString){
            return value;
        }

        searchString = searchString.trim().toLowerCase();

        // filter()方法创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素
        result = value.filter(function(item){
            // 如果搜索词被包含,则返回匹配的内容
            if(item.title.toLowerCase().indexOf(searchString) !== -1){
                return item;
            }
        });

        return result;
    });

     var demo = new Vue({
         el:"#main",
         data:{
             searchString : "",
             articles:[
                 {
                    "title" : "What You Need To Know About CSS Variables",
                    "url" : "www.baidu.com/",
                    "image" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513702065552&di=31cc963325776654684e2a05a7e2c61c&imgtype=0&src=http%3A%2F%2Fimg.taopic.com%2Fuploads%2Fallimg%2F120727%2F201995-120HG1030762.jpg"
                 },
                 {
                    "title" : "Freebie: 4 Great Looking Pricing Tables",
                    "url" : "www.google.com/",
                    "image" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513702065552&di=06b72962d3319bdb0ca14d0ded4f51ac&imgtype=0&src=http%3A%2F%2Fimg07.tooopen.com%2Fimages%2F20170316%2Ftooopen_sy_201956178977.jpg"
                 },
                 {
                    "title" : "20 Interesting JavaScript and CSS Libraries for February 2016",
                    "url" : "www.sougou.com/",
                    "image" : "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1513702065552&di=d2fb75d53377e893090d620c7989b136&imgtype=0&src=http%3A%2F%2Fdl.bizhi.sogou.com%2Fimages%2F2012%2F01%2F19%2F174522.jpg"
                 }
             ],
         }
     });



   </script>

  </body>
</html>