利用vue数据驱动视图的思想实现走马灯（文末附代码）

最新推荐文章于 2024-08-22 02:07:07 发布

处于菜鸟阶段的七七

最新推荐文章于 2024-08-22 02:07:07 发布

阅读量722

点赞数 1

文章标签：前端框架前端

本文链接：https://blog.csdn.net/qq_52372296/article/details/124258622

版权

以“猥琐发育，别浪！”为例。

思路：

1、搭建静态页面

2、创建vue实例，展示数据

3、处理字符串（切割+拼接）

4、开始、暂停按钮的点击事件

搭建静态页面

<div id="app">
        <button v-on:click="start" :disabled="disabled">浪起来</button>
        <button @click="stop" :disabled="!disabled">猥琐发育</button>
        <div>此处为走马灯文本</div>
    </div>

创建vue实例，展示数据

 <div id="app">
        <button v-on:click="start" :disabled="disabled">浪起来</button>
        <button @click="stop" :disabled="!disabled">猥琐发育</button>
        <div>{{msg}}</div>
    </div>
<script>
    var vu = new Vue({
        el: "#app",
        data: {
            msg: "猥琐发育，别浪~~~！",
        },
        methods: {
        }
    })
</script>

处理字符串

let first = this.msg[0];//选中字符串的第一个字符，选中 猥
let last = this.msg.slice(1);//当slice只有一个参数的时候，从参数位置选到结尾，
选中 琐发育别浪！
this.msg = last + first;//拼接，更新数据 琐发育别浪！+ 猥

使用计时器，不断更新数据，如此循环数据实时更新，页面数据也不断更新

setInterval(() => {
    let first = this.msg[0];
    let last = this.msg.slice(1);
    this.msg = last + first;
  }, 500)

开始、暂停按钮的点击事件

//开始
start() {
    this.disabled=!this.disabled;//改变按钮状态，防止用户多次点击
    timer=setInterval(() => {
    let first = this.msg[0];
    let last = this.msg.slice(1);
    this.msg = last + first;
 }, 500)
},
//暂停
stop() {
    clearInterval(timer);
    this.disabled=!this.disabled;//点击暂停以后，开始按钮改变状态变为可用状态，
暂停按钮为禁用状态
}

完整代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.min.js"></script>
</head>

<body>
    <div id="app">
        <button v-on:click="start" :disabled="disabled">浪起来</button>
        <button @click="stop" :disabled="!disabled">猥琐发育</button>
        <div>{{msg}}</div>
    </div>

</body>
<script>
    var vu = new Vue({
        el: "#app",
        data: {
            msg: "猥琐发育，别浪~~~！",
            timer: null,
            disabled:false,
        },
        methods: {
            start() {
                this.disabled=!this.disabled;
                timer=setInterval(() => {
                    let first = this.msg[0];
                    let last = this.msg.slice(1);
                    this.msg = last + first;
                }, 500)
            },
            stop() {
                clearInterval(timer);
                this.disabled=!this.disabled;
            }
        }
    })
</script>

</html>