【Vue.js學習筆記】Vue.js 用filter實現實時搜索功能

最後更新於 2021 年 3 月 15 日

演示

FIGHYJU 【Vue.js學習筆記】Vue.js 用filter實現實時搜索功能

程式碼

將 input v-model綁定search;為列表標籤設定v-if = "searchData.length >0" ,代表當輸入的文字和資料有匹配的值才會將其顯示,否則顯示「暫無結果」:

<div id="app" style="margin: 100px;">
   <p><h1>喻言歌曲搜索</h1></p>
   <input v-model="search" placeholder="請輸入歌曲名稱">
   <ul v-if="searchData.length > 0">
       <li v-for="song in searchData">{{song.name}}</li>
   </ul>
   <div v-else>暫無結果</div>
</div>

data給定一個 search 並設為空值 (根據使用者輸入而變動值);computed 新增一個 searchData的函數,並在裡頭宣告一個變數search,值為使用者輸入的值;當使用者輸入文字後,filter會判斷若是songs.name 中有找到匹配的值則會回傳歌曲名稱,若找不到則會回傳 -1 。

<script>
        var vm = new Vue({
            el: '#app',
            data: {
                search: '',
                songs: [{
                    name: '蠢貨'
                }, {
                    name: '小偷'
                }, {
                    name: '鸚鵡'
                }, {
                    name: 'Bad Girl'
                }, {
                    name: '顯微鏡女孩'
                }, {
                    name: '日常愛你'
                }, {
                    name: 'Give me all night'
                }, {
                    name: '我從沒想到會遇見你'
                }, {
                    name: '簡單.LIFE'
                }, {
                    name: '小心翼翼'
                }]
            },
            computed: {
                searchData: function() {
                    var search = this.search;
                    if (search) {
                        return this.songs.filter(value => value.name.indexOf(this.search) !== -1)
                    }
                    return this.songs;
                }
            }
        })
    </script>

:filter中有個參數value,可以當成是每次從陣列中遍歷出來的一個值;

indexOf() 方法會回傳給定元素於陣列中第一個被找到之索引,若不存在於陣列中則回傳 -1。

0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論