作业39

1.把课堂案例选项卡封装成组件，组件名：Card.vue

<template>
    <div id="card">
        <div class="title">
            <span @click="num=0" :class="num===0?'current':''">国内新闻</span>
            <span @click="num=1" :class="num===1?'current':''">国际新闻</span>
            <span @click="num=2" :class="num===2?'current':''">银河新闻</span>
        </div>
        <div class="content">
            <div class="list" :class="num===0?'active':''">国内新闻列表</div>
            <div class="list" :class="num===1?'active':''">国际新闻列表</div>
            <div class="list" :class="num===2?'active':''">银河新闻列表</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Card",
        data(){return {num:0}},
    }
</script>

<style scoped>
    #card{
        width: 500px;
        height: 350px;
    }
    .title{
        height:50px;
    }
    .title span{
        width: 150px;
        height: 50px;
        background-color:#ccc;
        display: inline-block;
        line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
        text-align:center;
    }
    .content .list{
        width: 500px;
        height: 300px;
        background-color: yellow;
        display: none;
    }
    .content .active{
        display: block;
    }

    .title .current{
        background-color: yellow;
    }
</style>

<template>