Vue-跑马灯效果

2023年2月13日08:55:19

代码实现

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--1.导入Vue包-->
		<script src="js/Vue-2.6.14.js"></script>
	</head>

	<body>
		<!--2.创建一个要控制的区域-->
		<div id="app">
			<input type="button" value="浪起来" @click="lang" />
			<input type="button" value="停止" @click="stop" />

			<h4>{{msg}}</h4>
		</div>
	</body>
	<script>
		//注意：在vw实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过 this.数据属性名或this.方法名来进行访问，这里的this,就表示我们new出来的 M实例对像

		var vm = new Vue({
			el: "#app",
			data: {
				msg: "猥琐发育，别浪~~！",
				intervalId: null, // 在data上定义 定时器Id
			},
			methods: {
				lang() {
					// console.log(this.msg)

					if(this.intervalId != null) return;

					this.intervalId = setInterval(() => {
						//获取到头的第一个字符 
						var start = this.msg.substring(0, 1)

						//获取到后面的所有字符 
						var end = this.msg.substring(1)

						//重新拼接得到新的字符串，并赋值给
						this.msg = end + start
					}, 400)

					//注意：实例，会监听自己身上ata中所有数据的改变，只要数据一发生变化，就会自动把最 新的数据，从data上同步到页面中去；【好处：程序员只需要关心数据，不需要考虑如何重新渲染DoM 页面】
				},

				stop() { // 停止定时器
					clearInterval(this.intervalId)
					//每当清除了定时器之后，需要重新把 interva1Id 置为 nul1 
					this.intervalId = null;
				}
			}

		})

		// 分析： 
		//1.给【浪起来】按钮，绑定一个点击事件 v-on @
		//2.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的 substring来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可 
		//3.为了实现点击下按钮，自动截取的功能，需要把2步骤中的代码，放到个定时器中去
	</script>

</html>

  • 作者：无聊大侠hello world
  • 原文链接：https://blog.csdn.net/qq_54693844/article/details/125287405
    更新时间：2023年2月13日08:55:19 ，共 1072 字。