我可以设置类名在几秒钟后更改吗

Question

我正在使用vue.js设置数据布尔值，以便在几秒钟后使用setTimeout进行更改，但结果显示数据保持不变。如果我已经返回了数据值，是什么原因导致了这种情况？

new Vue({
el: "#app",
data: {
showMsg: false,
},
methods: {
activeMsg() {
this.showMsg = true
this.msgNone
}
},
computed: {
msgNone() {
const msgCounter = setTimeout(()=>{
clearTimeout(msgCounter)
return this.showMsg = false
},2500)
},
},
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="activeMsg">click me</button>
<p v-if="showMsg">hello</p>
</div>

Answer 1

computed属性不进行异步调用，只是在方法内部调用了setTimeout：

new Vue({
el: "#app",
data: {
showMsg: false,
},
methods: {
activeMsg() {
this.showMsg = true
const msgCounter = setTimeout(() => {
this.showMsg = false
clearTimeout(msgCounter)
}, 2500)
}
},
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button @click="activeMsg">click me</button>
<p v-if="showMsg">hello</p>
</div>