助力活动 - 最新最热活动资讯 - 常规

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>助力活动 - 最新最热活动资讯</title>
    <meta name="description" content="查看最新的助力活动资讯，包括爱党、爱国、爱自己等主题活动，以及最热门的活动推荐。">
    <meta name="keywords" content="助力活动, 最新活动, 热门活动, 爱党, 爱国, 爱自己, 主题活动">
    <script src="../vue.js"></script>
    <style>
        .title {
            font-size: 25px;
        }
<pre><code>    .tabs {
        width: 200px;
        height: 25px;
        margin-left: 100px;
    }

    li {
        width: 46px;
        height: 22px;
        float: left;
        list-style: none;
        padding-left: 15px;
    }

    li:hover {
        color: white;
        background-color: blue;
    }

    .templ span {
        border-bottom: 1px dotted gray;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <div id="app">
        <div class="box">
            <div class="top">
                <span class="title">助力活动</span>
                <ul class="tabs">
                    <li :class="{active:active}" v-on:mouseover="toggleAction('newest')">最新</li>
                    <li :class="{active:!active}" v-on:mouseover="toggleAction('hottest')">最热</li>
                </ul>
            </div>
            <div class="templ">
                <component :is="current" :newest="newest" :hottest="hottest" :style="style"></component>
            </div>
        </div>
    </div>
    <template id="temp1">
        <div class="main">
            <div v-for="(item,index) in newest">
                <span>{{++index}}</span>
                <span>{{item.title}}</span>
                <span>{{item.time}}</span>
            </div>
        </div>
    </template>
    <template id="temp2">
        <div class="main">
            <div v-for="(item,index) in hottest">
                <span>{{++index}}</span>
                <span>{{item.title}}</span>
                <span>{{item.time}}</span>
            </div>
        </div>
    </template>
    <script>
        Vue.config.productionTip = false
        Vue.component('newest', {
            template: '#temp1',
            props: ['newest']
        })
        Vue.component('hottest', {
            template: '#temp2',
            props: ['hottest']
        })
        var vm = new Vue({
            el: '#app',
            data: {
                active: true,
                current: 'newest',
<pre><code>            newest: [
                {
                    title: '引领学生爱党、爱国',
                    time: '2022-05-17'
                }, {
                    title: '引领学生爱自己',
                    time: '2022-04-15'
                }, {
                    title: '引领学生爱家庭',
                    time: '2022-03-13'
                }, {
                    title: '引领学生爱岗位',
                    time: '2022-02-10'
                }, {
                    title: '引领学生爱民族',
                    time: '2022-01-09'
                }
            ],
            hottest: [
                {
                    title: '111标题111',
                    time: '2000-01-01'
                }, {
                    title: '222标题222',
                    time: '2000-01-02'
                }, {
                    title: '333标题333',
                    time: '2000-01-03'
                }, {
                    title: '444标题444',
                    time: '2000-01-04'
                }, {
                    title: '555标题555',
                    time: '2000-01-05'
                }
            ]
        },
        methods: {
            toggleAction: function (value) {
                this.current = value;
                value == 'newest' ? this.active = true : this.active = false;

            }
        }
    })
&lt;/script&gt;
</code></pre>
</body>
</html>