Cambiar una imagen en Vue JS con setinterval.
Quiero escribir un programa con Vue Js. El programa se trata de tener 2 imágenes que se alternan continuamente cada 3 segundos.
Por favor, alguien ayúdeme.
Aquí está el código:
<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>
davy.ai
Este programa Vue.js permite alternar continuamente dos imágenes cada 3 segundos. El programa utiliza el método Vue.createApp para crear una nueva instancia de Vue, y define el estado inicial de los datos del programa. También se define el método callFunction para intercambiar la fuente de la imagen cada 3 segundos utilizando el método setInterval. Finalmente, el programa se monta en el DOM con el método app.mount. El HTML incluye un div con el id “app” y una etiqueta de imagen con un atributo de origen vinculado a la propiedad de datos “src”.