zoukankan      html  css  js  c++  java
  • vue里数组排序示例

    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 userInfo">
            <li>姓名:{{user}}</li>
          </template>
        </div>
        <script>
            var v=new Vue({
                el:"#app",
                data:{
                    userInfo:['zhangsan','aisi','wangwu']
                }
            });
           v.userInfo.sort();
        </script>
      </body>
    </html>
     
    改写排序方式的示例
    <!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 userInfoSorted">
            <li>姓名:{{user.name}}</li>
          </template>
        </div>
        <script>
          var v = new Vue({
            el: "#app",
            data: {
              userInfo: [
                { name: "zhangsan" },
                { name: "aisi" },
                { name: "wangwu" },
              ],
            },
            computed: {
              userInfoSortedfunction () {
    // a,b参数代表的是user 按照 长度降序排序
                return this.userInfo.sort(function (a, b) {
                  return -(a.name.length - b.name.length);
                });
              },
            },
          });
        </script>
      </body>
    </html>
  • 相关阅读:
    FPGA图像处理之行缓存(linebuffer)的设计一
    Vivado常见问题集锦
    FIFO IP核
    大疆2019校招FPGA笔试总结
    TTL电平与RS232电平的区别
    vivado与modelsim的联合仿真
    Vivado中debug用法
    【错误解决】Error creating bean with name 'transactionManager' :nested exception is java.lang.NoClassDefFoundError: org/springframework/jdbc/datasource/
    【错误解决】The prefix "context" for element "context:component-scan" is not bound
    【转】Spring_IOC学习
  • 原文地址:https://www.cnblogs.com/kukai/p/12857743.html
Copyright © 2011-2022 走看看