Привязка стилей Vue3

Vue.js class

class и style — это атрибуты HTML-элементов, используемые для задания стилей элементов. Мы можем использовать v-bind для установки атрибутов стиля.

Когда v-bind обрабатывает class и style, выражение может быть не только строкой, но также объектом или массивом.

v-bind:classможно сократить как:class。

Привязка атрибута class

Мы можем дляv-bind:classзадать объект, чтобы динамически переключатьclass:

Пример 1

В примере установка isActive в true отображает зелёный блок div; если установить false, он не отображается:

<div :class="{ 'active': isActive }"></div>

Попробуйте сами »

Результат рендеринга класса div из приведённого выше примера:

<div class="active"></div>

Мы также можем передать больше свойств в объекте, чтобы динамически переключать несколько классов.

Кроме того,:classдиректива также может сосуществовать с обычными атрибутами class.

Пример 2

Цвет фона класса text-danger переопределяет цвет фона класса active:

<div class="static" :class="{ 'active' : isActive, 'text-danger' : hasError }"> </div>

Попробуйте сами »

Результат рендеринга класса div из приведённого выше примера:

<div class="static text-danger"></div>

Когда isActive или hasError изменяются, значение атрибута class также будет соответственно обновляться. Например, если значение active равно true, список классов станет "static active text-danger".

Мы также можем напрямую привязаться к объекту в data:

Пример 3

Цвет фона класса text-danger переопределяет цвет фона класса active:

<div id="app"> <div class="static" :class="classObject"></div> </div>

Попробуйте сами »

Результаты рендеринга примера 3 и примера 2 совпадают.

Кроме того, здесь мы также можем привязать вычисляемое свойство, возвращающее объект. Это распространённый и мощный приём:

Пример 4

data() { return { isActive: true, error: null } }, computed: { classObject() { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } } }

Попробуйте сами »

Синтаксис массива

Мы можем передать массив вv-bind:class, как показано в примере ниже:

Пример 5

<div class="static" :class="[activeClass, errorClass]"></div>

Попробуйте сами »

Результат рендеринга класса div из приведённого выше примера:

<div class="static active text-danger"></div>

Мы также можем использовать тернарное выражение для переключения классов в списке:

Пример 6

errorClass всегда присутствует; когда isActive имеет значение true, добавляется класс activeClass:

<div id="app"> <div class="static" :class="[isActive ? activeClass : '', errorClass]"></div> </div>

Попробуйте сами »

Результат рендеринга класса div из приведённого выше примера:

<div class="static text-danger"></div>

Стиль Vue.js (встроенные стили)

Мы можем вv-bind:styleнапрямую задавать стили, что можно сокращённо записать как:style：

Пример 7

<div id="app"> <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">Пример</div> </div>

Попробуйте сами »

Результат рендеринга стиля div из приведённого выше примера:

<div style="color: red; font-size: 30px;">Example</div>

Вы также можете напрямую привязаться кобъектустиля, чтобы сделать шаблон более понятным:

Пример 8

<div id="app"> <div :style="styleObject">Пример</div> </div>

Попробуйте сами »

v-bind:styleВы можете использовать массив, чтобы применить несколько объектов стиля к одному элементу:

Пример 9

<div id="app"> <div :style="[baseStyles, overridingStyles]">Пример</div> </div>

Попробуйте сами »

Примечание: когдаv-bind:styleиспользуется со свойствами CSS, требующими определённых префиксов, например, transform, Vue.js автоматически определит и добавит соответствующий префикс.

Несколько значений

Вы можете указать массив, содержащий несколько значений для свойства в привязке стиля; часто это используется для предоставления нескольких значений с префиксами, например:

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

Будет отображено только последнее значение в массиве, которое поддерживается браузером. В этом примере, если браузер поддерживает flexbox без браузерного префикса, то будет отображено только display: flex.

Использование атрибута class в компонентах

Когда вы используете атрибут class у пользовательского компонента с одним корневым элементом, эти классы будут добавлены к этому элементу. Существующие классы на этом элементе не будут перезаписаны.

Пример 10

<div id="app"> <example class="classC classD"></example> </div> <script>// Создайте приложение Vue const app = Vue.createApp({}) // Определите новый глобальный компонент с именем example app.component('example', { template: '<h1 class="classA classB">Мне нравится example!</h1>' }) app.mount('#app') </script>

Попробуйте сами »

Результат рендеринга класса div из приведённого выше примера:

<h1 class="classA classB classC classD">I like example!</h1>

Это также относится к классам с привязкой данных:

<my-component :class="{ active: isActive }"></my-component>

Когда isActive имеет значение true, HTML будет отображаться так:

<p class="active">Hi</p>

Если у вашего компонента несколько корневых элементов, вам нужно определить, какие части получат этот класс. Для этого можно использовать атрибут компонента$attrs:

Пример 11

<div id="app"> <example class="classA"></example> </div> <script> const app = Vue.createApp({}) app.component('example', { template: ` <p :class="$attrs.class">Мне нравится example!</p> <span>Это дочерний компонент</span> ` }) app.mount('#app') </script>

Попробуйте сами »

Примечание: В шаблоне`— это обратная кавычка, а не одинарная кавычка'。

Результат рендеринга класса div из приведённого выше примера:

<div id="app" data-v-app=""><p class="classA">I like example!</p><span>这是一个子组件</span></div>

Другие расширения