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

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



目录

  • 一、效果预览
  • 二、编写思路
  • 三、整体代码展示



一、效果预览

Vue实战项目1:跑马灯效果_第1张图片


二、编写思路

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


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


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


  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>


三、整体代码展示

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>



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

你可能感兴趣的:(#,Vue,vue.js,javascript,前端,前端框架)