vue小案例(跑马灯)

html模块!!

<div id="app">
<h4> {{msg}} </h4>
//开始跑马状态
<input type="button" value="飘" @click=‘lang‘>
//停止
<input type="button" value="定住" @click=‘stop‘>
</div>

  

 script模块

var vm =new Vue({
el:‘#app‘,
data:{
msg:‘主要是开心!加油~~~!‘,
intervalId:null,//在data定义 定时器Id
},
methods:{
lang(){
//判断当前这个跑马是否有点击跑马,有则不执行下面。防止多次点击
if(this.intervalId!==null) return;
// console.log(this.msg)
this.intervalId=setInterval(() => { //开启定时器
var start=this.msg.substring(0,1)
var end=this.msg.substring(1)
//获取新的字符串,重新拼接,重新赋值给 this.msg
this.msg =end+start
},500)
/*注意
Vue 实例,是会监听自己身上的 data中所有数据的改变,只要数据发生改变,就会把最新的数据同步到页面上
优点:这样子就不用考虑重新渲染DOM页面,只要把数据弄好就ojbk了

*/
},
stop(){ //停止定时器
clearInterval(this.intervalId)
console.log(31)
this.intervalId=null //每当停止定时器后 重新赋值维null
}
}
})

  

原文地址:https://www.cnblogs.com/mound/p/10561304.html

时间: 2024-11-05 21:55:02

vue小案例(跑马灯)的相关文章

VUE小案例--跑马灯效果

自学Vue课程中学到的一个小案例,跑马灯效果 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="

Vue教程02(跑马灯效果案例) &#253148;

原文: http://blog.gqylpy.com/gqy/423 置顶:来自一名75后老程序员的武林秘籍--必读(博主推荐) 来,先呈上武林秘籍链接:http://blog.gqylpy.com/gqy/401/ 你好,我是一名极客!一个 75 后的老工程师! 我将花两分钟,表述清楚我让你读这段文字的目的! 如果你看过武侠小说,你可以把这个经历理解为,你失足落入一个山洞遇到了一位垂暮的老者!而这位老者打算传你一套武功秘籍! 没错,我就是这个老者! 干研发 20 多年了!我也年轻过,奋斗过!我

vue小案例--简易评论区

一.小案例(评论区) 1.流程 (1)分析静态页面.(vue项目创建参考https://www.cnblogs.com/l-y-h/p/11241503.html)(2)拆分静态页面,变成一个个组件.(3)对组件编码,生成动态页面. 2.静态页面 参考来源:https://www.bilibili.com/video/av49099807/?p=22&t=1223 [举例:] <!DOCTYPE html> <html> <head> <meta char

Vue.js01:跑马灯效果

<!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" con

Vue(小案例_vue+axios仿手机app)_购物车

一.前言 1.购物车 二.主要内容 1.效果演示如下,当我们选择商品数量改变的时候,也要让购物车里面的数据改变 2.具体实现 (1)小球从上面跳到下面的效果 (2)当点击上面的“加入购物车按钮”让小球显示出来(这里需要用到vue中的动画过渡) 结构如下(这是在加入购物车这个页面) //小球 <transition name='ball' @after-enter='afterEnter'> <div class="ball" v-if="isExist&qu

Vue小案例 之 商品管理------创建页面与部分数据

logo的路径: 页面的初始布局: 初始的HTML: <div id="container"> <!--logo title--> <div class="header"> <img :src="imgUrl+imgName" class="logo" height="200px" width="150px" style="paddin

Vue(小案例)底部tab栏和顶部title栏的实现

---恢复内容开始--- 一.前言 1.底部tab栏实现 2.顶部title栏实现 二.主要内容   1.底部tab栏实现(将底部导航提取到公共的组件中) 具体效果:当点击切换不同的tab的时候,对应的显示高亮,并且切换到对应的页面中 (1)html/css代码 <template> <div> <footer class="footer_guide border-1px"> <a href="#" class="

VUE之文字跑马灯效果

<!DOCTYPE html> Title <input type="button" value="浪起来" @click="lang"> <input type="button" value="低调" @click="stop"> {{msg}} 原文地址:https://www.cnblogs.com/charlypage/p/9801085.ht

常见的跑马灯 动图 抽奖的案例

//抽奖的案例 <script type="text/javascript"> var alldata = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z"; var alldataarr = alldata.split(","); var num = alldataarr.length - 1; var timer; function start() { clearInter