我正在尝试将 setInterval 与我的函数 moveImage 一起使用,这会改变我的图像的位置! 这是我的代码:
<template>
<div class="randImg">
<img v-bind:style="{top: imgTop + 'px', left: imgLeft + 'px',height: imgHeight + 'px', width: imgWidth + 'px'}"
class="image" v-bind:src="vue">
</div>
</template>
<script>
const vue = require("../assets/images/vue.png");
export default {
name: "randImg",
data() {
return {
vue,
imgTop: 0,
imgLeft: 0,
imgHeight: 64,
imgWidth: 64,
changeInterval: 1000
}
},
created() {
setInterval(this.moveImage(), this.changeInterval);
},
computed: {
moveImage() {
this.imgTop = Math.round(Math.random() * (screen.height - this.imgHeight));
this.imgLeft = Math.round(Math.random() * (screen.width - this.imgWidth));
}
}
}
</script>
如你所见,我正在使用 vue.js 并收到错误“this.moveImage 不是函数” 请帮我解决这个问题!
最佳答案
这是因为 moveImage
不是一个方法,而是一个计算属性
。作为计算属性,vue 将为它生成一个 getter。
您需要将定义移至方法
methods: {
moveImage() {
this.imgTop = Math.round(Math.random() * (screen.height - this.imgHeight));
this.imgLeft = Math.round(Math.random() * (screen.width - this.imgWidth));
}
}
在调用 setTimeout
时,您想要函数返回值,因此您需要像这样调用它
created() {
setInterval(this.moveImage, this.changeInterval);
}
关于javascript - this.moveImage 不是一个函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55240632/