Vue, Как управлять HTML attr с помощью Vue Js

Я создал веб-страницу с помощью Django и Bootstrap. Теперь я использую vue для изменения кода. Однако мне трудно контролировать значение атрибута, поэтому, пожалуйста, дайте мне знать, есть ли хороший способ. Я буду благодарен, если вы сможете дать мне ответ. в Django

<button type="submit" data-bs-target="#carouselCaptions" data-bs-slide-to="{{forloop.counter0}}"
        aria-label="Slide {{forloop.counter}}" {% if forloop.first %} class="active" aria-current="true" {% endif%}>
</button>

vue???

<button v-else type="submit" data-bs-target="#carouselCaptions" :data-bs-slide-to="Slide [[idx]]":aria-label="[[idx+1]]" :class="">
</button>

Как написать код, чтобы работать в том же формате, что и Django? И :data="[x]" работает нормально, но :data="Slide [[x]]" вызывает ошибки. Как мне это исправить?

Попробуйте следующее:

<button v-else type="submit" data-bs-target="#carouselCaptions" :data-bs-slide-to="`Slide ${idx}`" :aria-label="idx+1" :class="">
Вернуться на верх