內建排序練習（2）預設版 | Programming Project

{"id":138650,"student_id":10,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003cscript src=\\\"https://cdn.jsdelivr.net/npm/vue/dist/vue.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \u003ch1\u003e購物商品\u003c/h1\u003e\\n    \u003cdiv class=\\\"btn-group\\\"\u003e\\n        \u003cbutton onclick=\\\"order_by_price_asc()\\\"\u003e價格由低到高\u003c/button\u003e\\n        \u003cbutton onclick=\\\"order_by_price_desc()\\\"\u003e價格由高到低\u003c/button\u003e\\n        \u003cbutton onclick=\\\"order_by_like_asc()\\\"\u003e評價由低到高\u003c/button\u003e\\n        \u003cbutton onclick=\\\"order_by_like_desc()\\\"\u003e評價由高到低\u003c/button\u003e    \\n    \u003c/div\u003e\\n    \\n    \u003ctable id=\\\"root\\\"\u003e\\n        \u003ctr\u003e\\n            \u003cth\u003e商名稱\u003c/th\u003e\\n            \u003cth onclick=\\\"orderByPrice()\\\"\u003e價格\u003c/th\u003e\\n            \u003cth onclick=\\\"orderByLike()\\\"\u003e評價\u003c/th\u003e\\n        \u003c/tr\u003e\\n        \u003ctr v-for=\\\"d in data\\\"\u003e\\n            \u003ctd\u003e{{d.name}}\u003c/td\u003e\\n            \u003ctd\u003e$ {{d.price}}\u003c/td\u003e\\n            \u003ctd\u003e\u0026#11088;{{d.like}}\u003c/td\u003e\\n        \u003c/tr\u003e\\n    \u003c/table\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    padding: 30px;\\n}\\n\\n.btn-group {\\n    text-align: center;\\n    padding: 15px;\\n}\\n\\nh1 {\\n    text-align: center;\\n}\\n\\ntable {\\n  border-collapse: collapse;\\n  width: 80vw;\\n  margin: auto;\\n}\\n\\nth, td {\\n  text-align: left;\\n  padding: 10px;\\n}\\n\\ntr:nth-child(even) {\\n    background-color: #f2f2f2;\\n}\",\"js\":\"var data = [\\n    { name: '雙效防蛀護齒牙膏', price: 299, like: 4 },\\n    { name: '旅充式行動電源', price: 1980, like: 300 },\\n    { name: '幫寶適一級幫紙尿褲', price: 1239, like: 798 },\\n    { name: '任天堂Switch豪華防摔旅行收納包', price: 650, like: 201 },\\n    { name: '抗敏系列空氣清淨機', price: 24900, like: 9 },\\n    { name: '麥香奶茶300ml (24入)', price: 240, like: 22 },\\n    { name: '德國護色去汙超濃縮洗衣精', price: 199, like: 79 },\\n    { name: '純萃柔感抽取式衛生紙', price: 869, like: 53 },\\n    { name: 'LOTTE 小熊餅乾-巧克力', price: 149, like: 102 },\\n    { name: 'Apple iPhone 11 (64G)', price: 24900, like: 2 },\\n];\\n\\n// 價格由低到高\\nfunction order_by_price_asc () {\\n    data.sort(function (a, b) {\\n        return a.price - b.price;\\n    });    \\n}\\n\\n// 價格由高到低\\nfunction order_by_price_desc () {\\n    data.sort(function (a, b) {\\n        return b.price - a.price;\\n    });    \\n}\\n\\n// 評價由低到高\\nfunction order_by_like_asc () {\\n    data.sort(function (a, b) {\\n        return a.like - b.like;\\n    });    \\n}\\n\\n// 評價由高到低\\nfunction order_by_like_desc () {\\n    data.sort(function (a, b) {\\n        return b.like - a.like;\\n    });    \\n}\\n\"}","created_at":"2020-04-08T16:40:44.719+08:00","updated_at":"2020-04-13T18:16:04.718+08:00","name":"內建排序練習（2）預設版","language":"web","screenshot":{"url":"/uploads/project/screenshot/138650/78529d70df32f74b3996d5921e33f905.jpg"},"parent_id":3,"plugin":"setTimeout(function() {\n    new Vue({\n        el: '#root',\n        data: function () {\n            return { data: window.data }\n        }\n    });    \n});\n\n","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":415,"hashid":"36ysn6zz","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}