初学VUE 走马灯效果
2024-09-05 03:01:29
<!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>
<script src="./js/vue.js"></script>
</head> <body>
<div id="a">
<input type="button" value="浪起来" @click='lang'>
<input type="button" value="稳住" @click='tingzhi'>
<p>{{ msg }}</p>
</div>
</body>
<script>
// vm上的数据发生变化 就会把新的数据从data中同步到页面中去
const vm = new Vue({
el: '#a',
data: {
msg: '大家一起嗨起来~~~!',
id: null,
},
methods: {
lang() {
// vue中想要获取上个局部数据 要用到this 但是这里有用到了定时器 this会指向window 所以我用了es6中的 =>函数
if (this.id != null) return;
// 要给一个点击的判断 要不然就会出现多次运行定时器 停止就不会管用了
this.id = setInterval(() => {
const q = this.msg.substring(0, 1);
const h = this.msg.substring(1);
// 把截取的字符创拼接到 msg 中
this.msg = h + q; }, 100)
},
tingzhi() {
clearInterval(this.id);
// 要把初始值在赋给 msg 要不然定时器不会再执行
this.id = null;
}
}
})
</script> </html>
很简单的走马灯效果
关注公众号 WEB前端大澳 领取资料
最新文章
- memcache服务器端及PHP memcache扩展的安装(转载)
- Python之路第一课Day2--随堂笔记
- 使用python+pychram进行API测试(接口测试)初级STEP 1
- Myeclipse加载maven
- 完成端口(Completion Port)详解(转)
- ASP.NET WebAPI 10 Action的选择(二)
- 关于table元素的认识
- Word 查找和替换的通配符
- Thinkphp代码生成工具 ThinkphpHelper
- multisim&;proteus&;protel比较
- Bootstrap3 datetimepicker控件的使用
- torch.linspace,unsqueeze()以及squeeze()函数
- 第23章 Spring MVC初体验
- MySQL 通过多个示例学习索引
- 使用 JS 实现文字上下跑马灯
- java中的数据加密5 数字证书
- brctl 命令详解
- 如何利用jQuery post传递含特殊字符的数据【转】
- 葡萄城报表介绍:Web 报表
- python函数之format
热门文章
- shell统计ip访问情况并分析访问日志
- ubuntu 12.04 nfs-server/client安装配置
- 一百四十三:CMS系统之评论布局和功能一
- delphi TClientDatset资料
- python reduce和偏函数partial
- ubuntu 18.04安装jdk8和eclipse
- cursor -- 定义鼠标样式
- 手动mvn install指令向maven本地仓库安装jar包
- CommMonitor10.0.3串口过滤工具(serial port monitor)
- QT OpenGLWidget的surfaceFormat