<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="box">
<!-- 点击添加事件 -->
<button @click="sortTicket(1)">升序排列</button>
<button @click="sortTicket(2)">降序排列</button>
<!-- 遍历books -->
<p v-for="book in books">书名:{{book.name}}月票:{{book.ticket}}</p>
</div>
<!-- 引入vue -->
<script src="./vue.js"></script>
<script>
new Vue({
el: "#box",
data: {
books: [{
id: 1,
name: "明克街13号",
ticket: 152
}, {
id: 2,
name: "人族镇守使",
ticket: 100
}, {
id: 3,
name: "星门",
ticket: 210
}, {
id: 4,
name: "重生之似水流年",
ticket: 175
}, {
id: 5,
name: "我的云养女友",
ticket: 972
}]
},
methods: { /* 添加函数 */
sortTicket(type) {
if (type == 1) {
/* 利用sort排序 升序 */
this.books.sort((a, b) => {
return a.ticket - b.ticket
})
} else if (type == 2) {
/* 利用sort排序 降序*/
this.books.sort((a, b) => {
return b.ticket - a.ticket
})
}
}
}
})
</script>
</body>
</html>