vue中的el-carousel如何插入图片
时间: 2024-02-26 16:52:22 浏览: 238
手动动态改变el-tabs标签页顺序
要在 Vue 中使用 `el-carousel` 组件插入图片,可以按照以下步骤操作:
1. 安装 `element-ui`:在终端中运行 `npm install element-ui -S` 或 `yarn add element-ui`。
2. 在 main.js 中引入 `element-ui`:`import ElementUI from 'element-ui';`,并注册 `element-ui` 组件:`Vue.use(ElementUI);`。
3. 在组件中使用 `el-carousel`,例如:
```
<template>
<el-carousel :interval="4000">
<el-carousel-item v-for="(item, index) in items" :key="index">
<img :src="item.src" alt="">
</el-carousel-item>
</el-carousel>
</template>
<script>
export default {
data() {
return {
items: [
{
src: 'https://picsum.photos/id/1005/600/400',
},
{
src: 'https://picsum.photos/id/1015/600/400',
},
{
src: 'https://picsum.photos/id/1025/600/400',
},
{
src: 'https://picsum.photos/id/1035/600/400',
},
],
};
},
};
</script>
```
其中,`:interval` 属性表示轮播间隔时间,`:src` 属性表示图片的地址。你可以根据自己的需求修改代码。
阅读全文