本站源码全部测试通过,配有前台及后台演示图,绿色安全,希望能对大家有所帮助!
  • 首 页
  • VPS/云主机
  • VIP会员
  • vue.js动态数据的文字滚动公告代码
    时间:2019-12-01 12:42 来源:开源之家 作者:开源之家测试提供 下载:70 次
    • 源码说明:本站源码全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    • 源码类型:特效源码
    • 源码大小:31.3 MB
    • 运行环境:HTML
    • 下载次数:70 次
    • 推荐VPS:
    • 提取密码/源码编号:
    • 本地下载
    • 本地下载
    • 》网盘下载,每日更新

    特效描述:vue.js 动态数据 文字滚动公告,vue.js设置动态文字数组列表, 制作文字滚动公告代码。(不兼容IE6,7,8,适用于手机端。)

    代码结构

    1. 引入JS

    1
    <script type="text/javascript" src="js/vue.min.js"></script>

    2. HTML代码

    <div class="vueBox">
        <div class="marquee">
            <div class="marquee_title">
                <span>最新战报</span>
            </div>
            <div class="marquee_box">
                <ul class="marquee_list" :class="{marquee_top:animate}">
                    <li v-for="(item, index) in marqueeList">
                        <span>{{item.name}}</span>
                        <span>在</span>
                        <span class="red"> {{item.city}}</span>
                        <span>杀敌</span>
                        <span class="red"> {{item.amount}}</span>
                        <span>万</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        const vm = new Vue({
            el: ".vueBox",
            data: {
                animate: false,
                marqueeList: [
                    {
                        name: '1军',
                        city: '北京',
                        amount: '10'
                    },
                    {
                        name: '2军',
                        city: '上海',
                        amount: '20'
                    },
                    {
                        name: '3军',
                        city: '广州',
                        amount: '30'
                    },
                    {
                        name: '4军',
                        city: '重庆',
                        amount: '40'
                    }
                ]
            },
            created: function () {
                setInterval(this.showMarquee, 2000)
            },
            methods: {
                showMarquee: function () {
                    this.animate = true;
                    setTimeout(()=>{
                        this.marqueeList.push(this.marqueeList[0]);
                    this.marqueeList.shift();
                    this.animate = false;
                },500)},
            }
        });
    </script>

    vue.js动态数据的文字滚动公告代码

    郑重声明:
    本站资源均由高价购买、会员分享,全部经过测试,配有前台及后台管理界面演示图,去除后门,绿色安全,希望对大家学习研究能有所帮助!
    若您需要商业运营或用于其它商业活动,请您购买正版授权并合法使用。 我们不承担任何技术及版权问题,且不对任何资源负法律责任。
    如无法下载,联系站长索要。如有侵犯您的版权,请提交软件证书/图片地址和源码链接 我们尽快处理。

    开源之家广告栏目A
    开源之家广告栏目B
    开源之家广告栏目C
    在线客服
    客服微信

    扫一扫......加客服微信