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>
Logo

前往低代码交流专区

更多推荐