vue入门——制作跑马灯效果

news/2024/7/10 2:23:16 标签: vue, 前端, 跑马灯

初学者vue可以制作一个简单的跑马灯效果的项目,效果如上图,代码如下图,大家可以自己尝试:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="button" value="浪起来" @click="lang">
		<input type="button" value="低调" @click="stop">

		<h4>{{ msg }}</h4>
	</div>

	<script>
		var vm = new Vue({
			el: '#app',
			data:{
				msg: '猥琐发育,别浪~~!',
				intervalId: null //在data上定义 定时器Id
			},
			methods:{
				lang(){

					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);
				},
				stop(){
					clearInterval(this.intervalId)
					this.intervalId = null
				},
			}
		})
	</script>
</body>
</html>

展示效果链接:http://hyc5.cn/paomadeng.html


http://www.niftyadmin.cn/n/1466655.html

相关文章

利用vue,bootstrap制作简单的列表展示,添加和删除功能

实现效果如下图所示&#xff1a; 添加按钮直接添加 删除按钮可以删除 其中的知识点有&#xff1a;bootstrap运用&#xff0c;v-model&#xff0c;keyup&#xff0c;click&#xff0c;全局过滤器&#xff0c;私有过滤器&#xff0c;自定义全局按键修饰符&#xff0c;Vue.directi…

vue使用钩子函数制作动画

vue使用钩子函数制作简单动画效果&#xff0c;代码如下&#xff0c;仅供参考交流&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width…

js中=,==,===的区别和使用

js中 是赋值的意思&#xff0c;让左边的值等于右边的值 是判断等于的意思&#xff0c;返回值是一个布尔值&#xff0c;它只判断值是否相等&#xff0c;不判断类型是否一样 也是判断等于的意思&#xff0c;返回值也是一个布尔值&#xff0c;但是它不仅仅判断值是否相等&#xff…

移动端解决点击300ms延迟问题

在页面中加上如下代码&#xff1a; <!-- 下面这段Js是为了解决移动端点击300ms延迟问题 --><script src"https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script><script>if (addEventListener in document) {d…

vue项目proxyTable配置和部署服务器的问题

在localhost环境下跑项目时&#xff0c;接口地址是 http://xxxx.com/save/index 这样的接口地址&#xff0c;我们这样直接使用会存在跨域的请求&#xff0c;导致接口请求不成功&#xff0c;我们进入 config/index.js 代码下如下配置即可。 dev: {// 静态资源文件夹assetsSubDi…

vue 生命周期 详解

先来看看vue官网对vue生命周期的介绍 Vue实例有一个完整的生命周期&#xff0c;也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程&#xff0c;我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程&#xff0c;就是生命周期。 …

stylus的基本用法

1.语法 Stylus的语法花样多一些&#xff0c;它使用“.styl”的扩展名&#xff0c;Stylus也接受标准的CSS语法&#xff0c;但是他也接受不带花括号和分号的语法&#xff0c;如下所示&#xff1a; /* style.styl */ h1 {color: #0982C1; } /* 省略花括号 */ h1color: #0982C1; …

es7中Async/await学习

Async/await 有一种特殊的语法可以更舒适地与promise协同工作&#xff0c;它叫做async/await&#xff0c;它是非常的容易理解和使用。 Async functions 让我们先从async关键字说起&#xff0c;它被放置在一个函数前面。就像下面这样&#xff1a; async function f() {retur…