Vue 文字跑马灯效果

1. 话不多说看代码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&a

是小方啦

3868人浏览 · 2018-10-31 20:49:06

是小方啦 · 2018-10-31 20:49:06 发布

1. 话不多说看代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue-2.5.17.js"></script>
  


</head>
<body>

<div id="app">

   <input type="button" value="开始"  v-bind:disabled=isDisabl  @click="start">
    <input type="button" value="结束"  @click="stop">
    <br>
    {{good}}

</div>
<script>

   new Vue({
        el: "#app",
        data: {
            good: "好好学习，天天向上！！！",
            interval: null,
            isDisabl:false

        },
        methods: {
            start() {
                console.log(this.good);

                var _this = this;

                _this.interval = setInterval(function () {
                    //获取第一个字符
                    var start = _this.good.substring(0, 1);
                    //得到后面的字符
                    var end = _this.good.substring(1);

                    _this.isDisabl=true;
                    //重新赋值
                    _this.good = end + start;
                }, 400)

            },
            stop: function () {

                //停止计时器
                this.isDisabl=false;
                clearInterval(this.interval);

            }
        }


    })

</script>

</body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^