Vue入門（十一）---- 計算屬性實現排序功能

阿新 • • 發佈：2019-01-07

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="D:\Github\vue\lib\vue.js" 
></script>

    <script>
        window.onload = function() {
            new Vue({
                el: '#app',
                data: {
                    items: [20, 23, 18, 65, 32, 19, 5, 56, 41],
                    students: [
                        {name: 'jspang', age: 32},
                        {name: 'jspng' 
, age: 70},
                        {name: 'jpang', age: 3},
                        {name: 'jspan', age: 2},
                    ]
                },
                computed: {
                    sortItems() {
                        return this.items.sort(sortNumber);
                    },
                    sortStudent() {
                        return 
 sortByKey(this.students, 'age');
                    }
                }
            })
            // 自定義普通陣列的排序，注意原生的sort()方法是以字元的形式排序的
            function sortNumber(a, b) {
                return a-b;
            }
            // 自定義 物件型別的排序
            function sortByKey(array, key) {
                return array.sort(function(a, b) {
                    var x = a[key];
                    var y = b[key];
                    return ((x<y)? -1: ((x>y)? 1: 0));
                })
            }
        }
    </script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="item in sortItems">
                {{item}}
            </li>
            <li v-for="(student, index) in sortStudent">
                    {{index}}: {{student.name}} - {{student.age}}
            </li>
        </ul>
    </div>
</body>
</html>

Vue入門（十一）---- 計算屬性實現排序功能

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <me

Vue入門（十一）---- mixins

混入 (mixins) 是一種分發 Vue 元件中可複用功能的非常靈活的方式。混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。 main.js

Storm入門（十一）Twitter Storm源代碼分析之CoordinatedBolt

WPF自學入門（十一）WPF MVVM模式Command命令

tps xaml 使用 company change 用戶通過命令 AC 聯系人在WPF自學入門（十）WPF MVVM簡單介紹中的示例似乎運行起來沒有什麽問題，也可以進行更新。但是這並不是我們使用MVVM的正確方式。正如上一篇文章中在開始說的，MVVM的

Java基礎入門（十一）之基本數據包裝類以及簡單轉換

數據包 intvalue nbsp 1.5 lse false 永遠 ring jdk 一、基本數據類型包裝類引用數據類型一般為基本數據類型首字母大寫，除了int 、char,其中int的引用數據類型類Integer,char的引用數據類型為Character 關

java多線程快速入門（十一）

lee read .get java多線 als pub syn this ble 在方法上面加synchonizd用的是this鎖 package com.cppdy; class MyThread7 implements Runnable { privat

java多執行緒快速入門（十一）

在方法上面加synchonizd用的是this鎖 package com.cppdy; class MyThread7 implements Runnable { private Integer ticketCount = 100; public boolean falg = tr

Python入門（十一）File檔案方法

Python File(檔案) 方法 file 物件使用 open 函式來建立，下表列出了 file 物件常用的函式：序號方法描述 1 file.close() 關

遊戲開發入門（十一）遊戲引擎架構

該堂課是對遊戲引擎內容的一個概括總結，同時也是對遊戲開發技術的一個相當全面的總結。正如我在開篇所提到的，遊戲引擎架構的學習有助於我們建立一個對遊戲全域性性的認識。筆記與總結（請先學習視訊

Swift入門（十一）——型別轉換與is、as操作

三種操作：is、as？和as！ Swift是強型別語言，但也允許開發者通過is、as？和as！這三種操作來對型別進行判斷和強制轉換。其中is用作型別判斷，而as？和as！則分別是型別轉換的可選形式和強制形式。在這裡強調一下，swift中比較常用的向下轉換（do

React Native入門（十一）之螢幕適配

準備首先，我們在官方文件寬度和高度一節可以知道，RN中單位是dp，這個跟Android中的單位是一致的！官網中： A dp is equal to one physical pixel on a screen with a density of 1

Shell指令碼入門（十一）

在實際開發中，我們的程式可能比較大，需要按模組開發，有不同的子程式每個子程式都是獨立的一個檔案，我們可以在一個主程式中呼叫他們示例： #!/bin/bash clear echo "" echo "1.Add" echo "2.Delete" echo "3.Dis

Apache Flink 零基礎入門（十一）Flink transformation

前面講了常用的DataSource的用法，DataSource其實是把資料載入進來，載入進來之後就需要做Transformatio

Spring Boot 入門（十一）：整合 WebSocket, 實時顯示系統日誌

以前面的部落格為基礎，最近一篇為Spring Boot 入門（十）：整合Redis哨兵模式，實現Mybatis二級快取。本篇部落格主要介紹了Spring Boot整合 Web Socket進行日誌的推送，並實時顯示在頁面上。 1.匯入jar包第一個jar包是websocket的，第二個jar包是關於環形佇列

OpenCV3入門（十一）影象直方圖

1、直方圖的概念灰度直方圖是灰度級的函式，描述的是影象中具有該灰度級的像元的個數。確定影象畫素的灰度值範圍，以適當的灰度間隔為單位將其劃分為若干等級，以橫軸表示灰度級，以縱軸表示每一灰度級具有的畫素數或該畫素佔總像元數的比例值，做出的條形統計圖即為灰度直方圖。灰度直方圖：橫座標是灰度，縱座標是該灰度在影象中

RxJava（十一）defer操作符實現程式碼支援鏈式呼叫

RxJava系列文章目錄導讀：一、前言現在越來越多Android開發者使用到RxJava，在Android使用RxJava主要有如下好處： 1，輕鬆切換執行緒。以前我們切換執行緒主要使用Handler等手段來做。 2，輕鬆解決回撥的巢狀問題。

Python爬蟲從入門到放棄（十一）之 Scrapy框架整體的一個了解

object 定義 roc encoding eth obi pipe pos 等等這裏是通過爬取伯樂在線的全部文章為例子，讓自己先對scrapy進行一個整理的理解該例子中的詳細代碼會放到我的github地址：https://github.com/pythonsite/

一步一步學習Vue（十一）

head move 就會基本參數 mode onclick set stat 本篇繼續學習vuex，還是以實例為主；我們以一步一步學Vue（四）中講述的例子為基礎，對其改造，基於vuex重構一遍，這是原始的代碼： todolist.js ; (functio

Openstack入門篇（十一）之neutron服務（控制節點）的部署與測試

驅動 username 禁止普通虛擬主機 group 查看禁用 poi 1.Neutron的介紹　　Neutron 為整個 OpenStack 環境提供網絡支持，包括二層交換，三層路由，負載均衡，防火墻和 *** 等。Neutron 提供了一個靈

深度學習（十一）RNN入門學習

RNN入門學習原文地址：http://blog.csdn.net/hjimce/article/details/49095371 作者：hjimce 一、相關理論 RNN(Recurrent Neural Networks)中文名又稱之為：迴圈神經網路（原來還有一個遞迴神經網路

Vue入門（十一）---- 計算屬性實現排序功能

相關推薦