提交 c61f50cb 编写于 作者: Daisyeee's avatar Daisyeee

221900135第2次提交--奖牌榜

上级 f0128170
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<template>
<v-data-table
:headers="headers"
:items="medalsList"
:items-per-page="10"
class="elevation-1"
></v-data-table>
</template>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<template>
<v-data-table
:headers="headers"
:items="medalsList"
:items-per-page="10"
class="elevation-1"
></v-data-table>
</template>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data () {
return {
headers: [
{
text: '排名',
align: 'start',
// sortable: false,
value: 'rank',
},
{
text: '国家',
sortable: false,
value: 'countryname'
},
{ text: '金牌', value: 'gold' },
{ text: '银牌', value: 'silver' },
{ text: '铜牌', value: 'bronze' },
{ text: '总数', value: 'count' },
],
medalsList: [
{
rank: "1",
countryname: "挪威",
gold: "16",
silver: "8",
bronze: "13",
count: "37",
},
{
rank: "2",
countryname: "德国",
gold: "12",
silver: "10",
bronze: "5",
count: "27",
},
{
rank: "3",
countryname: "中国",
gold: "9",
silver: "4",
bronze: "2",
count: "15",
},
{
rank: "4",
countryname: "美国",
gold: "8",
silver: "10",
bronze: "7",
count: "25",
},
{
rank: "5",
countryname: "瑞典",
gold: "8",
silver: "5",
bronze: "5",
count: "18",
},
{
rank: "6",
countryname: "荷兰",
gold: "8",
silver: "5",
bronze: "4",
count: "17",
},
{
rank: "7",
countryname: "奥地利",
gold: "7",
silver: "7",
bronze: "4",
count: "18",
},
{
rank: "8",
countryname: "瑞士",
gold: "7",
silver: "2",
bronze: "5",
count: "14",
},
{
rank: "9",
countryname: "ROC",
gold: "6",
silver: "12",
bronze: "14",
count: "32",
},
{
rank: "10",
countryname: "法国",
gold: "5",
silver: "7",
bronze: "2",
count: "14",
},
{
rank: "11",
countryname: "加拿大",
gold: "4",
silver: "8",
bronze: "14",
count: "26",
},
{
rank: "12",
countryname: "日本",
gold: "3",
silver: "6",
bronze: "9",
count: "18",
},
{
rank: "13",
countryname: "意大利",
gold: "2",
silver: "7",
bronze: "8",
count: "17",
},
{
rank: "14",
countryname: "韩国",
gold: "2",
silver: "5",
bronze: "2",
count: "9",
},
{
rank: "15",
countryname: "斯洛文尼亚",
gold: "2",
silver: "3",
bronze: "2",
count: "7",
},
{
rank: "16",
countryname: "芬兰",
gold: "2",
silver: "2",
bronze: "4",
count: "8",
},
{
rank: "17",
countryname: "新西兰",
gold: "2",
silver: "1",
bronze: "0",
count: "3",
},
{
rank: "18",
countryname: "澳大利亚",
gold: "1",
silver: "2",
bronze: "1",
count: "4",
},
{
rank: "19",
countryname: "英国",
gold: "1",
silver: "1",
bronze: "0",
count: "2",
},
{
rank: "20",
countryname: "匈牙利",
gold: "1",
silver: "0",
bronze: "2",
count: "3",
},
{
rank: "21",
countryname: "比利时",
gold: "1",
silver: "0",
bronze: "1",
count: "2",
},
{
rank: "21",
countryname: "捷克",
gold: "1",
silver: "0",
bronze: "1",
count: "2",
},
{
rank: "21",
countryname: "斯洛伐克",
gold: "1",
silver: "0",
bronze: "1",
count: "2",
},
{
rank: "24",
countryname: "白俄罗斯",
gold: "0",
silver: "2",
bronze: "0",
count: "2",
},
{
rank: "25",
countryname: "西班牙",
gold: "0",
silver: "1",
bronze: "0",
count: "1",
},
{
rank: "25",
countryname: "乌克兰",
gold: "0",
silver: "1",
bronze: "0",
count: "1",
},
{
rank: "27",
countryname: "爱沙尼亚",
gold: "0",
silver: "0",
bronze: "1",
count: "1",
},
{
rank: "27",
countryname: "拉脱维亚",
gold: "0",
silver: "0",
bronze: "1",
count: "1",
},
{
rank: "27",
countryname: "波兰",
gold: "0",
silver: "0",
bronze: "1",
count: "1",
},
],
}
},
})
</script>
</body>
</html>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册