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>