zoukankan      html  css  js  c++  java
  • vue里的过滤加排序操作示例

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
      </head>
      <body>
        <div id="app">
          <template v-for="user in userSort">
            <li>姓名:{{user.name}}</li>
          </template>
        </div>
        <script>
          var v = new Vue({
            el: "#app",
            data: {
              userInfo: [
                { name: "zhangsan" },
                { name: "aisi" },
                { name: "wangwu" },
              ],
            },
            computed: {
    //过滤方法
                userFilter:function(){
                    return this.userInfo.filter(function(user){
                        return user.name.match(/s/);
                    })
                },
    //排序方法
                userSort:function(){
    //a,b为任意参数,代表遍历的当前元素或对象(此处代表的是user)
                    return this.userFilter.sort(function(a,b){
                        return a.name.length-b.name.length;
                    })
                }
            },
          });
        </script>
      </body>
    </html>
  • 相关阅读:
    第十三周课程总结
    第十二周课程总结
    第十一周课程总结
    第十周课程总结
    第九周课程总结 & 实验报告(七)
    第八周课程总结 & 实验报告(六)
    第七周课程总结 & 实验报告(五)
    第六周总结 & 实验报告(四)
    课程总结
    第十四周课程总结&实验报告(简单记事本的实现)
  • 原文地址:https://www.cnblogs.com/kukai/p/12857850.html
Copyright © 2011-2022 走看看