189 8069 5689

Vuejs中怎么实现一个搜索匹配功能-创新互联

这期内容当中小编将会给大家带来有关Vuejs中怎么实现一个搜索匹配功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

成都创新互联是一家专注于网站制作、成都做网站与策划设计,湘潭网站建设哪家好?成都创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:湘潭等地区。湘潭做网站价格咨询:13518219792


  
    
    Vue测试2
    
    
      *{
        padding: 0;
        margin: 0;
        font-size: 14px;
        font-family: "微软雅黑";
      }
      #box{
        width: 500px;
        height: auto;
        border: 1px solid #ccc;
        margin: 50px auto;
        padding: 10px;
      }
      .search{
        width: 480px;
        height: 100px;
        text-align: center;
      }
      .searchBox{
        width: 230px;
        height: 40px;
        outline: none;
        text-indent: 10px;
        margin-right: 20px;
      }
      .btn{
        width: 100px;
        height: 50px;
        cursor: pointer;
        font-size: 18px;
      }
      .goodsheet{
        width: 500px;
        height: auto;
        border: 1px solid #eee;
      }
      .goodsheet tr td,
      .goodsheet tr th{
        width: 33%;
        border: 1px solid #eee;
        padding: 5px 10px;
        text-align: left;
      }
      .goodsheet tr th span{
        background: #ff9900;
        padding: 0 6px;
        color: #fff;
        cursor: pointer;
      }
    
  
  
    
      
        
        搜 索
      
                          商品名           单价             ↑             ↓                      销量             ↑             ↓                                        {{item.name}}           {{item.price}}           {{item.sales}}万                     
           var myVueTest = new Vue({         el:'#box',         data:{           goodsList:[             //假数据             {name:"三星Galaxy Note8",price:5200,sales:2.6},             {name:"iphone5s",price:2500,sales:2.2},             {name:"iphone6",price:2800,sales:1.6},             {name:"iphone6s",price:3200,sales:2.9},             {name:"iphone7",price:3800,sales:12.6},             {name:"iphone7plus",price:4200,sales:2.1},             {name:"iphone8",price:5500,sales:10.6},             {name:"华为",price:4600,sales:7.6},             {name:"小米",price:1200,sales:32.6},             {name:"OPPOR11",price:3000,sales:1.2},             {name:"vivoX20",price:3250,sales:2.9}           ],           searchVal:'',  //默认输入为空           letter:'',    //默认不排序           original:false  //默认从小到大排列         },         methods:{           orderFn(letter,original){             this.letter = letter;    //排序字段 price or sales              this.original = original;  //排序方式 up or down           }         },         //通过计算属性过滤数据         computed:{           list: function(){             var _this = this;             //逻辑-->根据input的value值筛选goodsList中的数据             var arrByZM = [];//声明一个空数组来存放数据             for (var i=0;i升序降序排列 false: 默认从小到大 true：默认从大到小             //判断，如果要letter不为空，说明要进行排序             if(this.letter != ''){               arrByZM.sort(function( a , b){                 if(_this.original){                   return b[_this.letter] - a[_this.letter];                 }else{                   return a[_this.letter] - b[_this.letter];                 }               });             }             //一定要记得返回筛选后的数据             return arrByZM;           }         }       });        

上述就是小编为大家分享的Vuejs中怎么实现一个搜索匹配功能了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注创新互联成都网站设计公司行业资讯频道。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


文章名称：Vuejs中怎么实现一个搜索匹配功能-创新互联
转载来源：http://cdxtjz.cn/article/jphdj.html

其他资讯