薛乎乎~ 2024-10-09 11:20 采纳率: 87.5%
浏览 0
已结题

利用JavaScript+vue实现css样式每5秒切换一次

利用JavaScript+vue实现css样式每5秒切换一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            background-color: blue;
            color: red;
        }
        .p2{
            background-color: green;
            color: white;
        }
        .p3{
            background-color: yellow;
            color: black;
        }
    </style>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <div id="app":class="sex[1]">
        <p>班级：{{gender}}</p>
        <p>学号：{{num}}</p>
        <p>姓名：{{name}}</p>
    </div>
    <script>
        let user={
            gender:"xxxx",
            num:'xxxx',
            name:'xxxx',
            sex:["p1","p2","p3"],
            p:''
        };
        let vm=new Vue({
            el:'#app',
            data:user,
        })
    </script>
</body>
</html>
  • 写回答

2条回答 默认 最新

  • Java Fans 全栈领域优质创作者 2024-10-09 11:23
    关注

    修改后的代码如下：（答题不易，还请题主采纳！）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            background-color: blue;
            color: red;
        }
        .p2{
            background-color: green;
            color: white;
        }
        .p3{
            background-color: yellow;
            color: black;
        }
    </style>
</head>
<body>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
    <div id="app" :class="sex[index]">
        <p>班级：{{gender}}</p>
        <p>学号：{{num}}</p>
        <p>姓名：{{name}}</p>
    </div>
    <script>
        let user = {
            gender: "xxxx",
            num: 'xxxx',
            name: 'xxxx',
            sex: ["p1", "p2", "p3"],
            index: 0
        };

        let vm = new Vue({
            el: '#app',
            data: user,
            created: function() {
                setInterval(() => {
                    this.index = (this.index + 1) % this.sex.length;
                }, 5000); // 切换间隔为5秒
            }
        });
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月17日
  • 已采纳回答 10月9日
  • 创建了问题 10月9日

悬赏问题

  • ¥15 mySQL5.7.34安装遇到的问题
  • ¥15 结构功能耦合指标计算
  • ¥20 visual studio中c语言用ODBC链接SQL SERVER
  • ¥50 AI大模型精调（百度千帆、飞浆）
  • ¥15 非科班怎么跑代码？如何导数据和调参
  • ¥15 福州市的全人群死因监测点死亡原因报表
  • ¥15 Altair EDEM中生成一个颗粒，并且各个方向没有初始速度
  • ¥15 系统2008r2 装机配置推荐一下
  • ¥15 悬赏Python-playwright部署在centos7上
  • ¥15 psoc creator软件有没有人能远程安装啊