Powiązania klas i stylów ​

Częstą potrzebą w wiązaniu danych jest manipulowanie listą klas elementu i stylami inline. Ponieważ class i style są atrybutami, możemy użyć v-bind, aby dynamicznie przypisać im wartość tekstową, podobnie jak w przypadku innych atrybutów. Jednak generowanie tych wartości poprzez powiązanie łańcuchów znaków może być uciążliwe i podatne na błędy. Z tego powodu Vue zapewnia specjalne ulepszenia, gdy v-bind jest używany z class i style. Oprócz łańcuchów znaków, wyrażenia mogą również zwracać obiekty lub tablice.

Wiązanie klas HTML ​

Wiązanie z obiektami ​

Możemy przekazać obiekt do :class (skrót od v-bind:class), aby dynamicznie przełączać klasy:

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

Powyższa składnia oznacza, że obecność klasy active będzie zależała od prawdziwości (truthiness) właściwości danej isActive.

Możesz przełączać wiele klas, dodając więcej pól do obiektu. Dodatkowo dyrektywa :class może współistnieć ze zwykłym atrybutem class. Przyjmując następujący stan:

const isActive = ref(true)
const hasError = ref(false)

data() {
  return {
    isActive: true,
    hasError: false
  }
}

Oraz następujący szablon:

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

Wyrenderuje to:

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

Kiedy wartości isActive lub hasError się zmienią, lista klas zostanie odpowiednio zaktualizowana. Na przykład, jeśli hasError zmieni się na true, lista klas stanie się "static active text-danger".

Obiekt powiązany nie musi być zapisany inline:

const classObject = reactive({
  active: true,
  'text-danger': false
})

data() {
  return {
    classObject: {
      active: true,
      'text-danger': false
    }
  }
}

<div :class="classObject"></div>

Wyrenderuje:

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

Możemy także powiązać klasę z właściwością computed, która zwraca obiekt. Jest to częsty i skuteczny wzorzec:

const isActive = ref(true)
const error = ref(null)

const classObject = computed(() => ({
  active: isActive.value && !error.value,
  'text-danger': error.value && error.value.type === 'fatal'
}))

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

<div :class="classObject"></div>

Wiązanie z tablicami ​

Możemy powiązać :class z tablicą, aby zastosować listę klas:

const activeClass = ref('active')
const errorClass = ref('text-danger')

data() {
  return {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
}

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

Co wyrenderuje:

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

Jeśli chcesz warunkowo dodać klasę do listy, możesz użyć wyrażenia trójskładnikowego (ternary expression):

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

To zawsze będzie dotyczyć errorClass, ale activeClass będzie stosowane tylko wtedy, gdy isActive będzie true.

Jednak może to być trochę rozwlekłe, jeśli masz wiele klas warunkowych. Dlatego możliwe jest również użycie składni obiektu wewnątrz składni tablicy:

<div :class="[{ [activeClass]: isActive }, errorClass]"></div>

Z komponentami ​

Ta sekcja zakłada znajomość komponentów. Możesz ją pominąć i wrócić do niej później.

Kiedy używasz atrybutu class w komponencie z pojedynczym elementem root, te klasy zostaną dodane do elementu root komponentu i połączone z już istniejącymi klasami.

Na przykład, jeśli mamy komponent o nazwie MyComponent z następującym szablonem:

<!-- szablon komponentu dziecka -->
<p class="foo bar">Hi!</p>

Następnie dodajemy klasy przy jego użyciu:

<!-- podczas używania komponentu  -->
<MyComponent class="baz boo" />

Wygenerowany HTML będzie wyglądał następująco:

<p class="foo bar baz boo">Cześć!</p>

To samo dotyczy powiązań klas:

<MyComponent :class="{ active: isActive }" />

Kiedy isActive jest wartością truthy, wygenerowany HTML będzie wyglądał następująco:

<p class="foo bar active">Cześć!</p>

Jeśli Twój komponent ma wiele elementów root, musisz określić, który element otrzyma tę klasę. Możesz to zrobić używając właściwości $attrs komponentu:

<!--  Szablon komponentu MyComponent z użyciem $attrs -->
<p :class="$attrs.class">Cześć!</p>
<span>This is a child component</span>

<MyComponent class="baz" />

Wyrenderuje to:

<p class="baz">Cześć!</p>
<span>To jest komponent dziecka</span>

Możesz dowiedzieć się więcej o dziedziczeniu atrybutów komponentów w sekcji atrybuty przechodzące.

Wiązanie stylów inline ​

Wiązanie z obiektami ​

:style obsługuje wiązanie z wartościami obiektów JavaScript — odpowiada właściwości style elementu HTML:

const activeColor = ref('red')
const fontSize = ref(30)

data() {
  return {
    activeColor: 'red',
    fontSize: 30
  }
}

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

Chociaż zalecane są klucze pisane z użyciem camelCase, :style obsługuje również klucze właściwości CSS w formacie kebab (odpowiada to sposobowi ich użycia w rzeczywistym CSS) - na przykład:

<div :style="{ 'font-size': fontSize + 'px' }"></div>

Często dobrym pomysłem jest bezpośrednie powiązanie z obiektem stylu, aby szablon był czystszy:

const styleObject = reactive({
  color: 'red',
  fontSize: '30px'
})

data() {
  return {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
}

<div :style="styleObject"></div>

Ponownie, powiązanie stylu obiektu jest często używane w połączeniu z obliczonymi właściwościami, które zwracają obiekty.

Dyrektywy :style mogą również być użyte obok normalnych atrybutów style, tak jak :class.

Szablon:

<h1 style="color: red" :style="'font-size: 1em'">hello</h1>

Wyrenderuje:

<h1 style="color: red; font-size: 1em;">hello</h1>

Wiązanie z tablicami ​

Możemy powiązać :style z tablicą wielu obiektów stylu. Te obiekty zostaną scalone i zastosowane do tego samego elementu:

<div :style="[baseStyles, overridingStyles]"></div>

Automatyczne dodawanie prefiksu ​

Gdy używasz właściwości CSS, która wymaga prefiksu dostawcy w :style, Vue automatycznie doda odpowiedni prefiks. Vue robi to, sprawdzając w czasie wykonywania, które właściwości stylu są obsługiwane w bieżącej przeglądarce. Jeśli przeglądarka nie obsługuje określonej właściwości, zostaną przetestowane różne warianty z prefiksem, aby spróbować znaleźć taką, która jest obsługiwana.

Wiele wartości ​

Możesz podać tablicę wielu (z prefiksem) wartości do właściwości stylu, na przykład:

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

To spowoduje wyświetlenie tylko ostatniej wartości w tablicy obsługiwanej przez przeglądarkę. W tym przykładzie zostanie wyświetlona wartość display: flex dla przeglądarek obsługujących wersję flexbox bez prefiksu.