vue模糊搜索&select取值

Posted webSong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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
            ]
        },
})

  

以上是关于vue模糊搜索&select取值的主要内容,如果未能解决你的问题,请参考以下文章

mysql怎么实现全局的模糊搜索?

bootstrap select下拉框模糊搜索和动态绑定数据解决方法

vue+element 支持模糊搜索的多选下拉列表封装(可直接使用)

vue实现模糊搜索

vue实现模糊搜索

vue实现高德地图模糊搜索+筛选条件+定位+信息窗(完整案例)