console 命令行工具 X clear
console
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<!-- import CSS -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
	<div id="app">
        <!-- 切换日榜和总榜 -->
        <div>
            <span style="color:blue;" :class="{selected:tabType==1}" @click="changeTab(1)">达人日榜</span>
            <span style="color:pink;margin-left:15px;" :class="{selected:tabType==2}" @click="changeTab(2)">达人总榜</span>
        </div>
        <!-- 日榜列表 -->
        
        <br>
        <b>颜色和加粗代表前三名奖牌</b>
        <div v-for="(item,index) in mapList">
            <div>
                <span :class="{first:index==0,second:index==1,third:index==2}">{{index}}</span> 
                ----- {{item.nickName}}----{{item.nickName}}
            </div>
        </div>
	</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js">

</script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js">

</script>
<script>
	new Vue({
        el: '#app',
        data(){
          return{
                tabType:1,
                mapList: [
                    {
                        anchorId: 900006450,
                        mountCount: 535,
                        nickName: "测试",
                        userId: 900006450,
                        photo: "http://chuangshicdn.file.m.mvbox.cn/3/a7ZzY3uQVRvU.jpg"
                    },
                    {
                        anchorId: 7848950,
                        mountCount: 60,
                        nickName: "一一一1",
                        userId: 7848950,
                        photo: "http://chuangshicdn.file.m.mvbox.cn/upload/mobile/userPhoto/18/06/04/18060418284576b342022e30441a.jpg"
                    },
                    {
                        anchorId: 900009929,
                        mountCount: 50,
                        nickName: "大甜瓜",
                        userId: 900009929,
                        photo: "http://chuangshicdn.file.m.mvbox.cn/upload/mobile/userPhoto/18/08/16/180816134731e9f4780b90a84771.jpg"
                    },
                    {
                        anchorId: 900005388,
                        mountCount: 2,
                        nickName: "]放弃···",      
                        userId: 900005388,
                        photo: "http://chuangshicdn.file.m.mvbox.cn/upload/mobile/userPhoto/18/06/04/180604150821b6b4f5a984af4a65.jpg"
                    }
                ]
            }
        },
        methods:{
            changeTab(type){
                this.tabType = type;
            }
        }
    
    })

</script>

<style>
    .first{
        color:red;
        font-size:32px;
    }
    .second{
        color:purple;
        font-size:28px;
    }
    .third{
        color:green;
        font-size:24px;
    }
    /* 切换选中 */
    .selected{
        border:5px solid black;
    }    

</style>

</html>
本项目引用的自定义外部资源

vue.js