Если вы предпочитаете посмотреть видео, вы можете посмотреть его здесь - https://youtu.be/7GCFDL3c8Vo

Передать привязку стиля во Vue легко. Вы можете пройти вот так

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Пример с официального сайта Vue

Вы можете использовать непосредственно из переменной, как это

<div class="progress">
   <div class="progress__fill" :style="{width: progress}"></div>
</div>
<script>
export default {
    props : ['percent'],
    data() {
        return {
            progress: this.percent + '%'
        }
    }
}
</script>

Если вы такие же, как я, мне нравится использовать изображение в качестве фонового изображения в div.

Я думаю, что такой метод заставит div иметь постоянный размер при изменении браузера и может обрабатывать разные типы размеров изображений.

Нормальный HTML будет выглядеть так

<div class="box" style="background-image: url('<https://vuejs.org/images/logo.png>')"></div>

Но как бы вы передавали данные, если фоновое изображение зависит от привязки данных; Это немного запутано, потому что нам нужно иметь дело со специальными символами в одной строке.

Есть 2 способа справиться с этим.

1. Если у вас есть статические данные

<template>
    <div class=" bg-no-repeat bg-cover  bg-white hero relative" :style="{ backgroundImage: `url(${backgroundUrl})` }"></div>
</template>
<script>
import backgroundUrl from '~/assets/img/bg-wp.png'
export default {
  data() {
    return {
      backgroundUrl
    }
  }
}
</script>

Импортируйте файл и передайте его в привязку данных Vue.

2. Динамические данные

<template>
    <div class="min-h-screen bg-grey bg-cover flex items-end block md:fixed w-full md:w-1/2 shadow-md" :style="{ backgroundImage: `url(${member.coverImage})` }">
        <p>{{ member.name }}</p>
    </div>
</template>
<script>
export default {
  data() {
    return {
      member: {
                name: "Jakz",
                coverImage: "<https://vuejs.org/images/logo.png>"
            }
    }
  }
}
</script>

Вы можете напрямую передать переменную во встроенный стиль

Я записал видео, чтобы показать, как это работает.

Оригинал прислан из моего блога