vue轮播图用图片链接
时间: 2024-01-26 17:13:13 浏览: 174
以下是一个基于Vue的轮播图组件的示例,其中图片可以通过链接进行跳转:
```html
<template>
<div>
<carousel :autoplay="true">
<slide v-for="(img, index) in imgs" :key="index">
<a :href="img.link" target="_blank">
<img :src="img.url" alt="carousel image">
</a>
</slide>
</carousel>
</div>
</template>
<script>
import Carousel from 'vue-carousel'
import Slide from 'vue-carousel/src/components/Slide'
export default {
components: {
Carousel,
Slide
},
data() {
return {
imgs: [
{ url: 'image1.jpg', link: 'https://example.com/page1' },
{ url: 'image2.jpg', link: 'https://example.com/page2' },
{ url: 'image3.jpg', link: 'https://example.com/page3' }
]
}
}
}
</script>
```
在上面的示例中,我们使用了`vue-carousel`组件来创建轮播图,并使用`vue-carousel`的`slide`组件来包裹每个图片。每个图片都被包裹在一个`<a>`标签中,链接属性`href`绑定到对应图片的链接属性`link`,并设置`target="_blank"`以在新窗口中打开链接。
你可以根据实际需求修改`imgs`数组中的图片链接和对应的跳转链接。
阅读全文