vue实现循环跑马灯效果,vue跑马灯无缝

　　本文主要介绍用Vue3实现跑马灯效果，可以改变颜色。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下。

　　本文分享Vue3实现跑马灯效果的具体代码，供大家参考。具体内容如下

　　先看效果：

　　html部分代码

　　div class=" app "

　　p:class= { tab color:color } { { str } }/p

　　按钮@click=播放开始/按钮

　　按钮@click=stop 停止/按钮

　　/div

　　注意：class={tabcolor:color} 是在我们单击开始按钮时给p/p标记中的文本添加一种颜色。

　　CSS部分代码。tabcolor {

　　颜色：矢车菊蓝；

　　}

　　CSS代码的一部分非常简单，就是给出了一个添加颜色的类。

　　Vue部分代码

　　Vue.createApp({

　　data() {

　　返回{

　　Str:“你好，我是石成聪头~”，

　　id: null，

　　颜色：假，

　　}

　　},

　　方法：{

　　播放(){

　　clearInterval(this . id)；

　　this.color=！this.color

　　this.id=setInterval(()={

　　this . str=this . str . slice(1)this . str . slice(0，1)

　　}, 800)

　　},

　　stop() {

　　clearInterval(this . id)；

　　this.color=false

　　}

　　}

　　}).安装(。app’)

　　分析：

　　1.定义要在p/p选项卡中滚动的数据字符串。

　　2.给启动和关闭按钮，绑定事件：v-on；@ cliick是v-on的简称。

　　3.在按钮的事件函数中，编写相关的业务逻辑代码：获取str字符串，然后调用字符串切片截取字符串，截取第一个字符，放在最后一个位置。

　　4.为了实现自动截取最终结果的功能，需要将步骤3中的代码放入一个定时器中。

　　最后，发送完整的代码。

　　！声明文档类型

　　html lang=en

　　头

　　meta charset=UTF-8

　　meta http-equiv= X-UA-Compatible content= IE=edge

　　meta name= viewport content= width=device-width，initial-scale=1.0

　　标题文档/标题

　　脚本src=。/js/vue.js/script

　　style type=text/css 。tabcolor {

　　颜色：矢车菊蓝；

　　}

　　/风格

　　/头

　　身体

　　div class=" app "

　　p:class= { tab color:color } { { str } }/p

　　按钮@click=播放开始/按钮

　　按钮@click=stop 停止/按钮

　　/div

　　/body

　　脚本

　　Vue.createApp({

　　data() {

　　返回{

　　Str:“你好，我是石成聪头~”，

　　id: null，

　　颜色：假，

　　}

　　},

　　方法：{

　　播放(){

　　clearInterval(this . id)；

　　this.color=！this.color

　　this.id=setInterval(()={

　　this . str=this . str . slice(1)this . str . slice(0，1)

　　}, 800)

　　},

　　stop() {

　　clearInterval(this . id)；

　　this.color=false

　　}

　　}

　　}).安装(。app’)

　　/脚本

　　/html

　　这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。