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

Question

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

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

网页如下所示:

<template>
<div class="main">
    <h2>
        {{ message }}
    </h2>
    <div class="alert alert-success" v-if="correctMessage">
        {{ correctMessage }}
    </div>
    <div class="alert alert-danger" v-if="incorrectMessage">
        {{ incorrectMessage }}
    </div>
    <h3>
        The current number is: <strong> {{ currentNumber }} </strong>
    </h3>
    <h4 class="score"> SCORE: {{ score }} / 8 </h4>
    <p> Is the next number higher or lower? </p>
    <button @click="guessHigher" class="button1">
        Higher
    </button>
    <button @click="guessLower" class="button2">
        Lower
    </button>
    <p> {{ numbers }} </p>
</div>
</template>

<script>
export default {
    name: "HighLow",
    data: function () {
        return {
            // the collection of numbers that the user will need to progress thru
            numbers: [],

            // the users current guess
            guess: null,

            // the users score
            score: 0,

            // Some info text to display to the user after their guess
            correctMessage: '',

            incorrectMessage: ''
        }
    },
    computed: {
        currentNumber: function () {
            return this.numbers[this.score];
        },

        nextNumber: function () {
            return this.numbers[this.score + 1];
        }
    },

    methods: {
        // Prepare the numbers array
        // reset the game logic
        initGame: function () {
            this.score = 0;
            this.guess = null;
            this.numbers = this.generateNumbers(10)
        },

        guessHigher: function () {
            // work out if the guess is correct...
            var correct = this.nextNumber > this.currentNumber;
            if (correct)
            {
                this.correctMessage = 'Correct!';
                this.score++;
            }
            else
            {
                this.incorrectMessage = 'Incorrect! Game Over!';
                this.shuffle(this.numbers);
                this.score = 0;
            }

            if (this.score === 8)
            {
                Swal.fire({
                    title: 'Brilliant. Absolutely brilliant. You are not a monkey after all.',
                    text: 'Play again?',
                    imageUrl: 'https://unsplash.it/400/200',
                    imageWidth: 400,
                    imageHeight: 200,
                    imageAlt: 'Custom image',
                })
                this.shuffle(this.numbers);
                this.score = 0;
            }
        },

        guessLower: function () {
            // work out if the guess is correct...
            var correct = this.nextNumber < this.currentNumber;
            if (correct)
            {
                this.correctMessage = 'Correct!';
                this.score++;
            }
            else
            {
                this.incorrectMessage = 'Incorrect! Game Over!';
                this.shuffle(this.numbers);
                this.score = 0;
            }

            if (this.score === 8)
            {
                Swal.fire({
                    title: 'Brilliant. Absolutely brilliant. You are not a monkey after all.',
                    text: 'Play again?' ,
                    imageUrl: 'https://unsplash.it/400/200',
                    imageWidth: 400,
                    imageHeight: 200,
                    imageAlt: 'Custom image',
                })
                this.shuffle(this.numbers);
                this.score = 0;
            }
        },

        shuffle: function (array) {
            return array.sort(() => Math.random() - 0.5);
        },

        generateNumbers: function (num) {
            var randomNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
            return this.shuffle(randomNumbers).slice(0, num);
        },

        // MY METHODS

        disableButton: function() {

        },

        getHint: function () {
            for (var i in this.numbers) {
                return i;
            }

            // currentNumber and numbers
        },
    },
    mounted: function () {
        // component is ready for action!
        this.initGame();
    },
}
</script>

Answer 1

您可以在函数 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>