Vue实现带有输入筛选功能的选择框

css

html

        

            
            

                
{{item}}
            
            

        

js

var app=new Vue({
        el:"#app",
        data:{
            list:["苹果","西瓜","番茄"],
            flag:false,
            con:"",
        },
        computed:{
            arr:function(){
                var arr=this.list.filter(function(item,index){
                    if(item.indexOf(this.con)!=-1){
                        return item;
                    }
                },this);
                return arr;
            }
        },
        watch:{
            con:function(val){
                if(val){
                    this.flag=true;
                }else{
                    this.flag=false;
                }
            },
            arr:function(val){
                if(val.length==0){
                    this.flag=false;
                }
            }
        },
        methods:{
            toggle:function(){
                this.flag=!this.flag;
            },
            cl:function(item){
                this.con=item;
                var self=this;
                this.$nextTick(function(){
                    self.flag=false
                })
            }
        },
        mounted:function(){
            var self=this;
            document.addEventListener("click",function(e){
                e.stopPropagation();
                var target=e.target;
                if(target.parentNode.className!="sel"||target.parentNode==null){
                    self.flag=false;
                }
            })
        }
    })

如有问题欢迎交流，微信：weiwei260104