动态属性

1
<MyCarousel v-bind="shouldAutoplay ? { autoplayInterval: 3000 } : {}" />

组合多个条件对象时，… 就会有用：

1
2
3
4
5
6
<MyCarousel v-bind="{
  ...baseProps,
  ...(shouldAutoplay ? { autoplayInterval: 3000 } : {}),
  ...(showArrows ? { showArrows: true } : {})
}" />

动态 Style

1
2
3
4
5
6
7
8
9
10
11
12
<template>
  <div :style="{ width: widthValue }" class="your-other-classes">
    <!-- 内容 -->
  </div>
</template>

<script setup lang="ts">
defineProps<{
  widthValue?: string
}>()
</script>