久久久久久AV无码免费看大片,亚洲一区精品人人爽人人躁,国产成人片无码免费爱线观看,亚洲AV成人无码精品网站,为什么晚上搞的时候要盖被子

vue elementUI 幻燈片, 輪播圖簡單實(shí)例

時(shí)間:2021-08-14 23:17:56 類型:vue
字號(hào):    

vue elementUI 幻燈片, 輪播圖簡單實(shí)例

這里是針對(duì)的寬屏圖片,所以采用的是背景圖片居中, 如果是一般的圖片, 可以直接img + src屬性就OK了

1. 在vue組件文件中

<template>
  <div class="home">
	
       		 <el-carousel :interval="5000" height="478px" arrow="always">
       		    <el-carousel-item v-for="item in imgs" :key="item" 
				:style="'background:url('+item+') no-repeat center'">
       		    </el-carousel-item>
       		  </el-carousel>
     
  </div>
</template>

2, js內(nèi)容

export default {
  name: 'Home',
  data(){
	  return {
		  imgs:[
			  require("../assets/images/slide01.jpg"),
			  require("../assets/images/slide02.jpg"),
		          require("../assets/images/slide03.jpg")
		          //注意: 這里一定 require, 不能直接寫地址
		]
	  }
  }
}

3, 效果如下:

   QQ截圖20210814231737.jpg

<