vue 搜索框 demo

主代码：

<form id="main" v-cloak>
 
    <div class="bar">
        <!-- searchString 模型与文本域创建绑定 -->
 
        <input type="text" v-model="searchString" placeholder="输入搜索内容" />
    </div>
 
    <ul>
        <!-- 循环输出数据 -->
             
        <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>

 

脚本：

var demo = new Vue({
    el: '#main',
    data: {
        searchString: "",
 
        // 数据模型，实际环境你可以根据 Ajax 来获取
 
        articles: [
            {
                "title": "What You Need To Know About CSS Variables",
                "url": "https://www.runoob.com/css/css-tutorial.html",
                "image": "https://static.runoob.com/images/icon/css.png"
            },
            {
                "title": "Freebie: 4 Great Looking Pricing Tables",
                "url": "https://www.runoob.com/html/html-tutorial.html",
                "image": "https://static.runoob.com/images/icon/html.png"
            },
            {
                "title": "20 Interesting JavaScript and CSS Libraries for February 2016",
                "url": "https://www.runoob.com/css3/css3-tutorial.html",
                "image": "https://static.runoob.com/images/icon/css3.png"
            },
            {
                "title": "Quick Tip: The Easiest Way To Make Responsive Headers",
                "url": "https://www.runoob.com/css3/css3-tutorial.html",
                "image": "https://static.runoob.com/images/icon/css3.png"
            },
            {
                "title": "Learn SQL In 20 Minutes",
                "url": "https://www.runoob.com/sql/sql-tutorial.html",
                "image": "https://static.runoob.com/images/icon/sql.png"
            },
            {
                "title": "Creating Your First Desktop App With HTML, JS and Electron",
                "url": "https://www.runoob.com/js/js-tutorial.html",
                "image": "https://static.runoob.com/images/icon/html.png"
            }
        ]
    },
    computed: {
        // 计算数学，匹配搜索
        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 articles_array;;
        }
    }

效果：

 

源码：

https://github.com/xiamaocheng/vuedemo/tree/master/demo_searchPage：

https://www.runoob.com/vue2/vue-examples.html