zoukankan      html  css  js  c++  java
  • vue_小项目_模糊搜索(列表过滤)_结果排序

    html

    •  
          <div id="test">
              <label>
                  <input type="text" v-model="searchWord" placeholder="搜索一下"/>
              </label>
              <button type="button" @click="orderType=1">原来排序</button>
              <button type="button" @click="orderType=2">升序排序</button>
              <button type="button" @click="orderType=3">降序排序</button>
              
              <ul>
                  <li v-for="(p, index) in searchResult">
                      {{p.name}}----{{p.age}}
                  </li>
              </ul>
              
          </div>
       

    js

    •  
      <script src="./js/vue.js"></script>
          <script>
              new Vue({
                  el:"#test",
                  data(){
                      return {
                          persons:[
                              {name:"Tom", age:18},
                              {name:"Jack", age:16},
                              {name:"Jerry", age:15},
                              {name:"Kate", age:17},
                              {name:"Lee", age:14}
                          ],
                          searchWord: "",
                          orderType: 1
                      }
                  },
                  computed:{
                      searchResult(){
                          const {orderType, searchWord, persons} = this;
                          
                          let result = persons.filter(person=>person.name.indexOf(searchWord)!==-1);
                          
                          if(orderType !== 1){
                              result.sort((one, two)=>{
                                  if(orderType === 2){
                                      return one.age - two.age
                                  }else if(orderType === 3){
                                      return two.age - one.age
                                  }
                              })
                          }
                          
                          return result;
                      }
                  }
              })
          </script>
  • 相关阅读:
    pgsql 时间转时间戳
    java SHA-1加密
    java 输出json文件
    按照指定字符串截取文本
    java 科学计数法转换
    【原创】几个常用机场的对比
    【原创】Google Cloud服务器路由分析
    批量转换文件Unicode到中文
    博客搬家
    关于zookeeper
  • 原文地址:https://www.cnblogs.com/baixiaoxiao/p/10573555.html
Copyright © 2011-2022 走看看