Если вы предпочитаете посмотреть видео, вы можете посмотреть его здесь - 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>
Вы можете напрямую передать переменную во встроенный стиль
Я записал видео, чтобы показать, как это работает.
Оригинал прислан из моего блога