Javascript 在Vue JS中单击按钮后，如何隐藏警报并显示另一个警报？

我正在用Vue JS设计一个名为“更高或更低”的游戏。每次单击其中一个按钮时，下面的代码将触发一个警报显示在网页上。但是，再次单击按钮后，警报不会消失

我想做的是，在单击按钮后，当前警报消失，以便显示下一个警报。这样，网页上只有一个相关警报

这是网页的外观：

{{message}}
{{correctMessage}}
{{incorrectMessage}}
当前号码是：{{currentNumber}
分数：{{SCORE}}/8
下一个数字是高还是低

较高的
降低
{{numbers}}

导出默认值{
名称：“HighLow”，
数据：函数（）{
返回{
//用户需要通过的数字集合
编号：[]，
//用户当前的猜测
猜测：空，
//用户得分
分数：0，
//在用户猜测后显示给用户的一些信息文本
更正消息：“”，
错误消息：“”
}
},
计算：{
currentNumber:函数（）{
返回这个.number[这个.score]；
},
nextNumber:函数（）{
返回此.number[this.score+1]；
}
},
方法：{
//准备数字数组
//重置游戏逻辑
initGame：函数（）{
这个分数=0；
this.guess=null；
this.numbers=this.generateNumbers（10）
},
更高：函数（）{
//算出猜测是否正确。。。
var correct=this.nextNumber>this.currentNumber；
如果（正确）
{
this.correctMessage='Correct！'；
这个是.score++；
}
其他的
{
this.incorrectMessage='不正确！游戏结束！'；
this.shuffle（this.number）；
这个分数=0；
}
如果（this.score==8）
{
喷火({
标题：“太棒了。太棒了。你毕竟不是猴子。”，
文字：“再次播放？”，
imageUrl:'https://unsplash.it/400/200',
图像宽度：400，
图像高度：200，
imageAlt:'自定义图像'，
})
this.shuffle（this.number）；
这个分数=0；
}
},
猜测：函数（）{
//算出猜测是否正确。。。
var correct=this.nextNumberMath.random（）-0.5）；
},
generateNumbers:函数（num）{
var randomNumbers=[1,2,3,4,5,6,7,8,9]；
返回这个.shuffle（随机数）.slice（0，num）；
},
//我的方法
disableButton:函数（）{
},
getHint:函数（）{
for（此.numbers中的var i）{
返回i；
}
//当前编号和编号
},
},
挂载：函数（）{
//组件已准备好采取行动！
这个.initGame（）；
},
}

我的坏习惯。Vuejs中没有.remove（）函数。把东西混在一起了

var-vue=新的vue({
el：“你的女同学”，
数据：{
isShowing:错，
}
})

然后，您可以将

isShowing

变量更改为true或false以查看或隐藏它

---

希望这对你有帮助：）

我的错。Vuejs中没有.remove（）函数。把东西混在一起了

var-vue=新的vue({
el：“你的女同学”，
数据：{
isShowing:错，
}
})

然后，您可以将

isShowing

变量更改为true或false以查看或隐藏它

---

希望这能对您有所帮助：）

您可以在函数中添加这行代码

guessHigher

&

guessLower

if (correct) {
  this.incorrectMessage = '' // +
  this.correctMessage = 'Correct!'
  this.score++
} else {
  this.correctMessage = '' // +
  this.incorrectMessage = 'Incorrect! Game Over!'
  this.shuffle(this.numbers)
   this.score = 0
}

在模板中使用

v-show

指令也应该更方便：

<div class="alert alert-success" v-show="correctMessage">
  {{ correctMessage }}
  </div>
<div class="alert alert-danger" v-show="incorrectMessage">
  {{ incorrectMessage }}
</div>

{{correctMessage}}
{{incorrectMessage}}

您可以在函数中添加这一行

guessHigher

&

guessLower

if (correct) {
  this.incorrectMessage = '' // +
  this.correctMessage = 'Correct!'
  this.score++
} else {
  this.correctMessage = '' // +
  this.incorrectMessage = 'Incorrect! Game Over!'
  this.shuffle(this.numbers)
   this.score = 0
}

在模板中使用

v-show

指令也应该更方便：

<div class="alert alert-success" v-show="correctMessage">
  {{ correctMessage }}
  </div>
<div class="alert alert-danger" v-show="incorrectMessage">
  {{ incorrectMessage }}
</div>

{{correctMessage}}
{{incorrectMessage}}

您需要在某个点将

correctMessage

的值更改为空字符串。另外，请注意

警报

通常是使用javascript函数

alert（）

显示的警报框的简称。这对您的问题没有多大影响，但可能会让人困惑。您需要更改

correctMessage