Vue 文字跑马灯效果

时间 2020-01-18 标签 vue 文字马灯效果

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 文字跑马灯效果

1. 话很少说 看代码

1. 话很少说看代码