作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有以下循环轮播的代码,这很好,但我希望能够在图像顶部显示下方的项目标题。我认为这样做的方法是创建一个新的数据值,每次轮播更改时都会更新该数据值。但是,我不知道该怎么做。
<v-carousel>
<v-carousel-item
v-for="(item,i) in servicesCarouselItems"
:key="i"
:src="item.src"
>
</v-carousel-item>
</v-carousel>
<v-card-title class="justify-center">{{currentTitle}}</v-card-title>
<script>
export default {
data: () => ({
currentTitle: '',
servicesCarouselItems: [
{
name: "Title1",
src: require('../../1.jpeg'),
},
{
name: "Title2",
src: require('../../2.jpeg'),
},
{
name: "Title3",
src: require('../../3.jpeg'),
}
],
})
}
</script>
最佳答案
可能最好的方法是使用 v-model
- 当前项目的索引在那里公开...
<v-carousel v-model="currentIndex">
<v-carousel-item
v-for="(item,i) in servicesCarouselItems"
:key="i"
:src="item.src"
>
</v-carousel-item>
</v-carousel>
<v-card-title class="justify-center">{{ currentTitle }}</v-card-title>
<script>
export default {
data: () => ({
currentIndex: 0,
servicesCarouselItems: [
{
name: "Title1",
src: require('../../1.jpeg'),
},
{
name: "Title2",
src: require('../../2.jpeg'),
},
{
name: "Title3",
src: require('../../3.jpeg'),
}
],
}),
computed: {
currentTitle() {
return this.servicesCarouselItems[this.currentIndex].name
}
}
}
</script>
关于javascript - 如何在 v-carousel 中获取当前项目索引?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59947666/
我是一名优秀的程序员,十分优秀!