I wrote .vue file like below to change h1#msg
after 100ms.
<template>
<div id="main">
<h1 id="msg">{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Top',
data () {
let a=['TEST']
setTimeout((function(a){a[0]='test'}),100)
return {
msg: a
}
}
}
</script>
<style>
</style>
However I cannot change state by this code. I tried to use Array to pass value by reference. I don't like to use querySelector(), because it forces me to add attitude in HTML and arguments for methods.
Dont write javascript inside data()
, the correct is this code:
<script>
export default {
name: 'top',
data () {
return {
msg: 'test'
}
}
mounted() {
setTimeout(() => this.msg = 'Bu!', 100)
}
}
</script>
Try this code snippets
<template>
<div id="main">
<h1 id="msg">{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Top',
data () {
return {
msg: 'a'
}
},
created() {
setTimeout(() => this.msg = 'Hello World!', 100)
}
}
</script>
Your data
should just declare the variable to whatever you want it to be before the change. Then do the timeout
in mounted
.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.