zoukankan      html  css  js  c++  java
  • 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
                ]
            },
    })
    

      

  • 相关阅读:
    python中unicode、utf8、gbk等编码问题
    git常用操作
    python List&Set&Dict交集、并集、差集
    VIM的高级使用
    Logger级别和输出的地方
    Eclipse+pydev 常用快捷键
    架构相关领域的学习材料(转)
    深入浅出之正则表达式(一)
    深入浅出之正则表达式(二)
    软件project总结
  • 原文地址:https://www.cnblogs.com/webSong/p/7224693.html
Copyright © 2011-2022 走看看