vue模糊搜索&select取值


之前vue1.0的過濾器真的很好使,但是作者為了不讓搬運工變得太菜。硬是砍去了過濾器,為此,我還哭了好一陣,終於,一點一點的弄明白了過濾器是怎么回事后,也學明白了vue里的屬性監聽器computed以及框架里提供的filter的使用,覺得,作者這樣做是對的。

先來一個模糊搜索

 <ul>
        <li v-for="user in newUsers" >
            {{ user.code }}
        </li>
 </ul>

new Vue({
        el: '.app',
        data: {
            name: '',
            users: [
                { code: '11111' },
                { code: '8797979' },
                { code: '4565465' },
                { code: '555555' },
                { code: '1006' },
                { code: '2555' },
            ]
            
        },
        computed: {
            newUsers: function () {
                var that = this;
                return that.users.filter(function (user) {
                    return user.code.toLowerCase().indexOf(that.code.toLowerCase()) !== -1;//當然如果是純屬字就可以不用轉換小寫了,處於習慣還是加上了
                })
            }
        }

    })

  接下來還有一個select的,其實官網有例子,但是我還是毫無保留的拿出來了。

 <select v-model="selected" >
        <option v-for="option in options" v-bind:value="option">
            {{ option }}
        </option>
    </select>
    <span>Selected: {{ selected }}</span>

new Vue({
        el: '.app',
        data: {  
            selected: '30',
            options: [
                30,50,70,100
            ]
        },
})

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM