• Vue实战项目1：跑马灯效果

    Vue实战项目1：跑马灯效果


    目录


    一、效果预览

    在这里插入图片描述


    二、编写思路

    1. 两个按钮用于启动和停止，绑定点击事件，使用v-on，可以简写为@
    <input type="button" value="跑起来" @click="run"/>
<input type="button" value="停下来" @click="stop"/>

    • 1
    • 2


    1. 在按钮的事件处理函数中，首先拿到msg字符串，然后调用字符串的substring来进行字符串截取操作，即，截取第一个字符，放到最末尾处。
    var start = this.msg.substring(0, 1)
var end = this.msg.substring(1)
this.msg = end + start

    • 1
    • 2
    • 3


    1. 使用定时器实现自动重复截取和拼接的功能。
    setInterval(() => {
	var start = this.msg.substring(0, 1)
	var end = this.msg.substring(1)
	this.msg = end + start
},200)

    • 1
    • 2
    • 3
    • 4
    • 5


    1. 为了确保定时器不会重复叠加开启，在data中定义intervalId，确保定时器状态
    <script>
	var vm = new Vue({
		el: '#app',
		data: {
			msg: '恐龙抗狼，抗狼抗~',
			intervalId: null
		},
		methods:{
			run(){
				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
				},200)
			},
			stop() {
				clearInterval(this.intervalId)
				this.intervalId = null
			}
		}
	})
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24


    三、整体代码展示

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>跑马灯效果title>
		<script src="lib/vue-2.4.0.js">script>
	head>
	<body>		
		<div id="app">
			<input type="button" value="跑起来" @click="run"/>
			<input type="button" value="停下来" @click="stop"/>
			<h4>{{ msg }}h4>
		div>
		
		<script>
			var vm = new Vue({
				el: '#app',
				data: {
					msg: '恐龙抗狼，抗狼抗~',
					intervalId: null
				},
				methods:{
					run(){
						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
						},200)
					},
					stop() {
						clearInterval(this.intervalId)
						this.intervalId = null
					}
				}
			})
		script>
	body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41


    本篇博客为本人学习Vue时的详细笔记，如有错误之处，还望各位指正。
    文章为原创，如要转载请注明出处

  • 相关阅读:
    程序地址空间--Linux
    《智谋故事》收纳
    数字颠倒输出
    C# in a Nutshell 系列（3）C#语言基础
    基于SpringBoot vue的茶叶商城平台源码和论文含支付宝沙箱支付
    什么是无人机倾斜摄影？无人机倾斜摄影测量测绘中的应用有哪些？
    经典网络解（三） 生成模型VAE | 自编码器、变分自编码器|有监督，无监督
    MVC模式认识
    【Java 进阶篇】使用 Java 和 Jsoup 进行 XML 处理
    tiup dm restart
  • 原文地址：https://blog.csdn.net/m0_59188912/article/details/133797722