vue 走马灯！

最新推荐文章于 2024-01-16 22:56:11 发布

邢帥兵_

最新推荐文章于 2024-01-16 22:56:11 发布

阅读量198

点赞数

分类专栏： vue js html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_64875238/article/details/126981473

版权

js 同时被 3 个专栏收录

41 篇文章 28 订阅

订阅专栏

vue

20 篇文章 43 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

效果图

注意！！！需要外引入 vue 文件。别忘咯

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Document</title>
		<style>
			#app {
				color: pink;
				font-size: 20px;
				font-weight: normal;
				font-family: serif;
			}
		</style>
	</head>

	<body>
		<div id="app">
			<input type="button" value="飘啊飘" @click="dong">
			<input type="button" value="停" @click="stop">

			<h4>{{msg}}</h4>
		</div>
	</body>
	<!--  -->
	<script src="./js/vue.js"></script>
	<script>
		Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。

		var vm = new Vue({
			el: "#app",
			data: {
				msg: "!主要是开心！加油~~~~",
				items: null,
			},
			methods: {
				dong() {
					// 设置定时器，每100毫秒运行1次
					this.items = setInterval(() => {
						// substring  截取！       从下标0开始截取  共截取1位
						var a = this.msg.substring(0, 1);
						// console.log(a);
						//  从下标1开始截取，截取到最后！  此时的下标1是 “ 主 ” ！
						var b = this.msg.substring(1)
						this.msg = b + a
					}, 200)

				},
				stop() {
					// 清楚定时器
					clearInterval(this.items)
				}
			}
		})
	</script>
</html>