vue--实现跑马灯效果
Vue 实现 -- 效果 跑马灯
2023-09-27 14:22:21 时间
<div id="app"> <input type="button" value="开始" @click="lang"> <input type="button" value="挺" @click="clear"> <p>{{msg}}</p> </div>
<script> var vm = new Vue({ el: "#app", data: { msg: "我哈你丹江口安居客耙齿菌", id: null, }, methods: { lang: function () { if (!this.id) {//值为true指向下面这一段代码 this.id=setInterval(() => { var start = this.msg.substring(0, 1); var end = this.msg.substring(1); this.msg = end + start; //是最后一段拼接上前面的一段 //当开启定时器后 id就改变为了2哦 console.log(this.id) //2 }, 400); } else { } }, clear: function () { clearInterval(this.id); //清除定时器后 id仍然为2 console.log("清除前id为"+this.id); this.id=null; } }, }) </script>
相关文章
- 前端实操案例丨如何实现JS向Vue传值
- 基于vue-node的共享车位管理系统的设计与实现_kaic
- vue 借用element-ui实现头像上传 axios发送请求
- Vue你不知到的$this.emit()的用法
- vue+elementUI+node实现登录模块--验证用户名是否正确
- vue+node+elementUI实现注册功能
- 精品springboot+VUE的学生宿舍管理系统设计与实现
- 134/(前端)订单列表布局与显示——子组件挂载的方式与分类管理vue的结构搭建
- vue使用bus总线,实现非父子组件间的通信
- vue中的项目目录assets和staitc的区别
- Vue中使用定时器setInterval和setTimeout
- vue 动态路由实现 笔记。--含使用vuex
- vue 2.0使用动态组件实现tab切换效果
- vue用户登录切换小案例(v-if和v-else的使用)
- 如何通过点击商品的信息(图片或者文字)跳转到更加详细的商品信息介绍(前后端分离之Vue实现)
- vue+element的表格分页和前端搜索
- # quill-image-extend-module :实现vue-quill-editor图片上传,复制粘贴,拖拽
- vue 2.0 + elementUI 实现面包屑导航栏
- vue 关于数组和对象的更新
- [golang][vue] 前后端分离、微服务架构等等---通用后台权限管理系统001
- VUE系列三:实现跨域请求(fetch/axios/proxytable)
- Spring Boot + Vue 前后端分离开发,前端网络请求封装与配置
- Vue.js双向绑定的实现原理
- 基于Vue实现登录模块流程总结
- 从实现讲解vue的原理
- Vue 实现前进刷新,后退不刷新的效果
- Vue.js双向绑定的实现原理
- vue的Virtual Dom实现- snabbdom解密
- JavaScript 之实现一个简单的 Vue
- Vue.js实现多条件筛选、搜索、排序及分页的表格功能
- Vue.js模拟微信朋友圈开发demo