【Vue学习】Vue实践-实现跑马灯效果

最新推荐文章于 2023-12-07 15:37:45 发布

乌药ice

最新推荐文章于 2023-12-07 15:37:45 发布

阅读量411

点赞数

CC 4.0 BY-SA版权

分类专栏：文章回收站

本文内容如有侵权，请及时内信我删除。博客内容仅供学习参考，不可用于其他用途。转载请注明本文作者：乌药ice

本文链接：https://blog.csdn.net/qq_41138935/article/details/100745421

实现思路

定义一个字符串，不断截取第一个字符和剩下的字符，把第一个字符加载到剩下字符的末尾，使用定时器每隔一段时间重复执行即可。

例如：123456

第一次截取1 23456

第一次合并23456 1

第二次截取2 34561

第二次合并34561 2

...............

不断重复.................

基于这个想法，我们先实现点击“跑起来”，执行截取、合并操作，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>跑马灯效果</title>
	<!-- 导入Vue的包 -->
	<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="跑起来" @click="run"/>
		<input type="button" value="停止" />
		<h4>{
  
  { msg }}</h4>
	</div>

	<script>
		var vm=new Vue({
			el:'#app',
			data:{
				msg:'好好学习，天天天向上~~'
			},
			methods:{
				run:function(){
					// 打印到控制台
					// 注意：在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.属性名 或 thi