我想用Vue Js寫一個程式。該程式大約有 2 個影像，每 3 秒連續交替。
請有人幫助我。
這是代碼
<script>
const app = Vue.createApp({
data() {
return{
src : "farkas.jpg"
}
},
methods: {
callFunction: function() {
var v = this;
setInterval(function() {
v.src = "mokus.jpg"
}, 3000);
}
},
mounted () {
this.callFunction()
}
})
const vm = app.mount('#app')
</script><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image changer</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<img :src="src">
</div>
</body>
</html>uj5u.com熱心網友回復：
您可以在 中定義源串列data：
data() {
return {
src : "farkas.jpg",
srcs: ["farkas.jpg", "mokus.jpg"]
}
}
在函式中，i初始定義為0，每次遞增/重置它：
callFunction: function() {
let i = 0;
setInterval(() => {
this.src = this.srcs[i];
if( i === this.srcs.length) i = 0;
}, 3000);
}
uj5u.com熱心網友回復：
this.interval = setInterval(function() {
if (v.src === "mokus.jpg") v.src = "farkas.jpg"
else v.src = "mokus.jpg" }, 3000);
并在 beforeDestroy 鉤子中使用此代碼銷毀間隔。
clearInterval(this.interval)
uj5u.com熱心網友回復：
你能試一下嗎：
const app = Vue.createApp({
data() {
return{
currentSrc : 0,
srcs: ["img1.jpg", "img2.jpg"]
}
},
methods: {
callFunction: function() {
setInterval(() => {
this.currentSrc = this.currentSrc === this.srcs.length - 1 ? 0 : this.currentSrc 1;
}, 1000);
}
},
computed: {
src: function(){
return this.srcs[this.currentSrc]
}
},
mounted () {
this.callFunction()
}
})
const vm = app.mount('#app')
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/367572.html
標籤：javascript Vue.js 设置间隔