使用Vue语法绘制一个排行榜页面
时间: 2023-05-12 11:05:25 浏览: 67
可以使用Vue的template语法和v-for指令来绘制一个排行榜页面,示例代码如下:
<template>
<div class="rank-list">
<h2>排行榜</h2>
<ul>
<li v-for="(item, index) in rankData" :key="index">
<span class="rank">{{ index + 1 }}</span>
<span class="name">{{ item.name }}</span>
<span class="score">{{ item.score }}</span>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
rankData: [
{ name: '张三', score: 100 },
{ name: '李四', score: 90 },
{ name: '王五', score: 80 },
{ name: '赵六', score: 70 },
],
};
},
};
</script>
<style>
.rank-list {
font-size: 16px;
margin: 20px;
}
h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.rank {
width: 50px;
text-align: center;
margin-right: 10px;
}
.name {
flex: 1;
margin-right: 10px;
}
.score {
width: 50px;
text-align: center;
}
</style>