Vue.js 条件和 V-For 未按预期工作

Question

由于该Array.splice()功能，v-if即使第二个条件正确，也只会触发第一个。当我 console.log 对象时，photos“照片”对象的数字长度会逐渐变小，4直到0满足第一个条件为止。如何阻止这种情况发生以显示正确的 div ？这是我的代码主体：

<div v-if="(checkCount = 1)">
            <Splide :options="{ rewind: true }" aria-label="Carousel Pictures">
                <SplideSlide class="fs-800">
                    <div v-for="item in photos.splice(0, 4)" :key="item.id">
                        <a href="">
                            <img :src="item.img" alt="" />
                            <p>{{ item.text }}</p>
                        </a>
                    </div>
                </SplideSlide>
            </Splide>
        </div>
        <div v-else-if="(checkCount = 2)">
            <Splide :options="{ rewind: true }" aria-label="Carousel Pictures">
                <SplideSlide class="fs-800">
                    <div v-for="item in photos.splice(0, 4)" :key="item.id">
                        <a href="">
                            <img :src="item.img" alt="" />
                            <p>{{ item.text }}</p>
                        </a>
                    </div>
                </SplideSlide>
                <SplideSlide class="fs-800">
                    <div v-for="item in photos.splice(0, 4)" :key="item.id">
                        <a href="">
                            <img :src="item.img" alt="" />
                            <p>{{ item.text }}</p>
                        </a>
                    </div>
                </SplideSlide>
            </Splide>
        </div>

这是数据和条件：

data() {
        return {
            photos: [
                {
                    img: "https://picsum.photos/300/300",
                    text: 1,
                },
                {
                    img: "https://picsum.photos/300/300",
                    text: 2,
                },
                {
                    img: "https://picsum.photos/300/300",
                    text: 3,
                },
                {
                    img: "https://picsum.photos/300/300",
                    text: 4,
                },
                {
                    img: "https://picsum.photos/300/300",
                    text: 5,
                },
                {
                    img: "https://picsum.photos/300/300",
                    text: 6,
                },
                {
                    img: "https://picsum.photos/300/300",
                    text: 7,
                },
                {
                    img: "https://picsum.photos/300/300",
                    text: 8,
                },
            ],
        };
    },
    computed: {
        checkCount() {
            if (this.photos.length <= 4) {
                return 1;
            } else if (this.photos.length > 5 && this.photos.length <= 8) {
                return 2;
            } else if (this.photos.length > 9 && this.photos.length <= 12) {
                return 3;
            } else {
                return 4;
            }
        },
    },

Answer 1

这看起来像是分配而不是比较：

checkCount = 1

试试这个：

checkCount == 1或者checkCount === 1