Question

我正在尝试更改每个不同轮播的背景。那怎么可能？因为我似乎无法做到这一点。

<div id="carousel2">
    <el-carousel :interval="4000" type="card">
        <el-carousel-item v-for="item in 6" :key="item">
            <el-carousel-item style="background-color:green;" v-if="item === 1"></el-carousel-item>
            <h3>{{item}}</h3>
        </el-carousel-item>
    </el-carousel>
</div>

Answer 1

如果只需要设置backgroundColor，则可以设置类似

的样式

.el-carousel__item:nth-child(n) {
   background-color: green;
}

您也可以使用vue完成它：

<el-carousel-item :style="{ background: 'green' }" v-if="item === 1"></el-carousel-item>
     <h3>{{item}}</h3>
 </el-carousel-item>

Answer 2

尝试一下：

<div id="carousel2">
  <el-carousel :interval="4000" type="card">
    // If background color
    <el-carousel-item v-for="item in twoItems" :key="item" :style="{ backgroundColor : item.bgColor }">
      <h3>{{item.title}}</h3>
    </el-carousel-item>

    // If background image
    <el-carousel-item v-for="item in twoItems" :key="item" :style="{backgroundImage : `url(${ $item.bgImg })`}">
      <h3>{{item.title}}</h3>
    </el-carousel-item>
  </el-carousel>
</div>

还有脚本中的数据：

<script>
  export default {
    data() {
      return {
        twoItems: [
          { title: 'Item One', bgColor: 'red', bgImg: 'lorem.jpg'  },
          { title: 'Item Two', bgColor: 'blue', bgImg: 'ipsum.jpg' },
        ],
      };
    },
  };
</script>

轮播Vue.js

2 个答案: