使用Vue完成跑马灯效果

最新推荐文章于 2023-10-12 20:37:44 发布

北凉不悲凉

最新推荐文章于 2023-10-12 20:37:44 发布

阅读量316

点赞数

本文链接：https://blog.csdn.net/hgh1998/article/details/98875359

版权

使用Vue完成跑马灯效果

首先我们需要了解以下知识点：

1.v-on:指令或@
2.v-html指令
3.定时器（正确启动和停止）
4.字符串截取
5.ECMAScript6新特性
6.this对象指代

【ECMAScript6的新特性】

   1.给JavaScript对象方法定义值时
                标准：
                    sayHello:function(){}
                ES6：
                    此时，方法名sayHello会作为对象的属性方法值
                    sayHello(){
                    }
            2.箭头函数的使用
                标准：
                    setInterval(function(){
                        //此时this对象时Window对象
                    },500);
                ES6：可以把外部环境传入箭头函数所指向的函数内部
                    setInterval(() => {
                        //此时this对依然是外部的this
                    },500);

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../lib/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
    <button @click="start()">开启</button>
    <button @click="stop()">停止</button>
    <h3 v-html="info"></h3>
</div>
<script type="text/javascript">
    var vm=new Vue({
        el:"#app",
        data:{
            info: "我要这天，再遮不住我眼，要这地，再埋不了我心，要这众生，都明白我意，要那诸佛，都烟消云散！",
            IntervalID:null
        },
        methods:{
            start:function () {
                if (this.IntervalID!==null){return;}
                this.IntervalID=setInterval(()=>{
                    this.info=this.info.substring(1).concat(this.info.charAt(0));
                },200);
            },
            stop(){
                clearInterval(this.IntervalID);
                this.IntervalID=null;
            }
        }
    })


</script>
</body>
</html>

效果：
在这里插入图片描述
【知识点】
1.定时器的使用
步骤1：定义全局的定时器编号，初始值为null
步骤2：判断定时器编号是否为null
如果不为null，直接返回（表示此时定时器已经启动，不可重复启动）
如果为null，则使用setInterval()启动定时器，并保存定时器编号到全局定时器变量中
步骤3：停止定时器
使用clearInterval()停止定时器，并把全局的定时器编号变量赋值为null
便于下次继续启动
2.Vue对象
vue对象中data、methods里面声明的内容全部都会成为vm的直接属性、方法
所有这些内容应该直接使用this访问，而不是【this.data.xxx、this.methods.xxx()】

北凉不悲凉

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用Vue完成跑马灯效果

使用Vue完成跑马灯效果首先我们需要了解以下知识点：1.v-on:指令或@2.v-html指令3.定时器（正确启动和停止）4.字符串截取5.ECMAScript6新特性6.this对象指代【ECMAScript6的新特性】 1.给JavaScript对象方法定义值时标准： sayHello:func...
复制链接

扫一扫