如何在VueJS中多次更改元素的类

Question

函数，我想用Vue.js实现它。

示例：https://codesandbox.io/s/xjk3xqnprw这是我想在Vue js中实现的

下面是我的vue组件，它加载得很好，但是没有动画

我的Vue组件：

<template>
    <div class="container">
        <div class="row justify-content-center">

            <div class="col-md-6">
                <div class="card">
                    <div class="card-header">Dice Game <h5 class="blink" style="color: red">* live</h5></div>
                    <div class="card-body" style="background-color: #3f0d12;background-image: linear-gradient(315deg, #3f0d12 0%, #a71d31 74%);
">
                        <div class="dice">
                            <ol class="die-list even-roll" data-roll="1" id="die-1">
                                <li class="die-item" data-side="1">
                                    <span class="dot"></span>
                                </li>
                                <li class="die-item" data-side="2">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </li>
                                <li class="die-item" data-side="3">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </li>
                                <li class="die-item" data-side="4">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </li>
                                <li class="die-item" data-side="5">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </li>
                                <li class="die-item" data-side="6">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </li>
                            </ol>
                            <ol class="die-list odd-roll" data-roll="1" id="die-2">
                                <li class="die-item" data-side="1">
                                    <span class="dot"></span>
                                </li>
                                <li class="die-item" data-side="2">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </li>
                                <li class="die-item" data-side="3">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </li>
                                <li class="die-item" data-side="4">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </li>
                                <li class="die-item" data-side="5">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </li>
                                <li class="die-item" data-side="6">
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                    <span class="dot"></span>
                                </li>
                            </ol>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Home",
        methods: {
            rollDice() {
                const array1= [5,6];
                const dice = [...document.querySelectorAll(".die-list")];
                console.log(dice);
                let count = 0;
                dice.forEach(die => {
                    toggleClasses(die);
                    die.dataset.roll = array1[count];
                    count++
                });
            },
            toggleClasses(die) {
                die.classList.toggle("odd-roll");
                die.classList.toggle("even-roll");
            },
            getRandomNumber(min, max) {
                min = Math.ceil(min);
                max = Math.floor(max);
                return Math.floor(Math.random() * (max - min + 1)) + min;
            },
        },
        beforeMount() {
            this.rollDice();
        },
    }
</script>

<style scoped>

</style>

我想要切换样式类(在循环中)，这样就可以实现掷骰子的动画效果

提前感谢你的帮助

Answer 1

您现在正在切换您的rollDice函数beforeMount，如果您将其更改为created，更改将被正确切换，还要注意，您将需要将toggleClasses更改为this.toggleClasses，因为它是在组件的methods部分中定义的，因此它被绑定到组件，而不再是全局函数。

我希望这对你有帮助！

P.S.setTimeout对于工作样例，请注意，我在这里使用了settimeout用于演示目的，但您可以将其调整为组件中按钮上的@click="rollDice"，而省略已挂载的所有内容