小编Sae*_*ali的帖子

我有一系列连续的“.row”引导元素，如下所示：

            <div class="row">
                <div class="col-4">
                    <div class="elem">1</div>
                </div>
                <div class="col-4">
                    <div class="elem">2</div>
                </div>
                <div class="col-4">
                    <div class="elem">3</div>
                </div>
            </div>

            <div class="row">
                <div class="col-4">
                    <div class="elem">4</div>
                </div>
                <div class="col-4">
                    <div class="elem">5</div>
                </div>
                <div class="col-4">
                    <div class="elem">6</div>
                </div>
            </div>

            <div class="row">
                <div class="col-4">
                    <div class="elem">7</div>
                </div>
                <div class="col-4">
                    <div class="elem">8</div>
                </div>
                <div class="col-4">
                    <div class="elem">9</div>
                </div>
            </div>

我想用 CSS 动态更改每隔一行的行顺序。有人能帮我吗？

所需的输出：

我的页面中有一个轮播组件，其中的数据通过 AJAX 调用服务器来加载。这部分没问题，但是当旋转木马项目附加到旋转木马时，它就会崩溃。所以我需要在AJAX成功后重新渲染轮播。有人有什么想法吗？我搜索了很多，但找不到 vue.js 的任何内容。

我的代码：

<carousel class="original-carousel" :dots="false" :nav="false">
                            <router-link class="product-item" to="/product" v-for="product in originalGames">
                                <div class="image-holder">
                                    <img v-bind:src="product.thumbnail_url" v-bind:alt="product.name">
                                    <div class="product-info">
                                        <div class="product-platform">
                                            origin
                                            <img src="/src/assets/imgs/platform/origin-color.svg" >
                                        </div>
                                        <div class="product-region">
                                            US
                                        </div>
                                    </div>
                                </div>
                                <h2 class="product-title">{{product.name}}</h2>
                                <div class="product-bottom">
                                    <div class="product-card-price">
                                        <div class="original-price__holder" >
                                            <span class="sale-range" v-if="product.sale_percent !== false">%{{product.sale_percent}}</span>
                                            <span class="original-price" v-if="product.sale_percent !== false"> {{product.regular_price}}</span>
                                        </div>
                                        <span class="sale-price">{{product.price}}</span>
                                    </div>
                                    <button class="add-to-cart btn btn--circle btn--transparent">+</button>
                                </div>
                            </router-link>
                        </carousel>


export default {
    name: "homePage",
    components: {searchBar, topNav, siteFooter, carousel},
    data(){
        return …