<style> .demo-carousel{ height: 200px; line-height: 200px; text-align: center; color: #fff; font-size: 20px; background: #506b9e; } </style> <template> <div style="width: 400px;"> <Carousel v-model="value1" loop arrow="always" @on-change="handleChange"> <CarouselItem> <div class="demo-carousel">1</div> </CarouselItem> <CarouselItem> <div class="demo-carousel">2</div> </CarouselItem> <CarouselItem> <div class="demo-carousel">3</div> </CarouselItem> <CarouselItem> <div class="demo-carousel">4</div> </CarouselItem> </Carousel> <Button @click="value1 = 2">change</Button> </div> </template> <script> export default { data () { return { value1: 0 } }, methods: { handleChange (old, newval) { console.log(old, newval); } } } </script>