<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app>p {
font-size: 24px;
}
</style>
</head>
<body>
<div id="app">
<button @click="start()">浪起来</button>
<button @click="end()">别浪</button>
<p>{{txt}}</p>
</div>
<script src="./js//vue.js"></script>
<script>
const vm = new Vue({
el: "#app",
data: {
txt: "猥琐发育~~别浪!!",
timer: null,
// flag:true
},
methods: {
start() {
// if (this.flag) {
if(this.timer != null) return;
this.timer = setInterval(() => {
let s = this.txt.substring(0, 1)
let e = this.txt.substring(1)
this.txt = e + s;
}, 500)
this.flag = false
// }
},
end() {
clearInterval(this.timer);
// this.flag = true
this.timer = null;
}
}
})
</script>
</body>
</html>
点击实现跑马灯效果Vue
最新推荐文章于 2024-08-22 02:07:07 发布