Przypisywanie klas i stylów #

Częstą potrzebą wiązania danych jest manipulowanie listą klas elementu i jego stylami inline. Ponieważ oba te elementy są atrybutami, możemy użyć v-bind do ich obsługi: musimy tylko obliczyć końcowy ciąg znaków za pomocą naszych wyrażeń. Jednakże, mieszanie się z konkatenacją ciągów znaków jest irytujące i podatne na błędy. Z tego powodu, Vue zapewnia specjalne ulepszenia, gdy v-bind jest używane z class i style. Oprócz ciągów znaków, wyrażenia mogą być również przetwarzane na 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 określana przez prawdziwość właściwości danych isActive.

Możesz mieć wiele klas przełączanych przez posiadanie większej ilości pól w obiekcie. Dodatkowo, dyrektywa :class może również współistnieć ze zwykłym atrybutem class. Tak więc biorąc pod uwagę następujący stan:

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

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

I poniższy szablon:

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

Będzie renderować:

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

Gdy isActive lub hasError ulegnie zmianie, lista klas zostanie odpowiednio zaktualizowana. Na przykład, jeśli hasError stanie się true, lista klas stanie się "static active text-danger".

Obiekt związany nie musi być inline:

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

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

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

Spowoduje to wyświetlenie tego samego wyniku. Możemy również powiązać się z właściwością obliczeniową, która zwraca obiekt. Jest to często stosowany i potężny 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 również warunkowo przełączać klasy na liście, możesz to zrobić za pomocą wyrażenia warunkowego:

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

To zawsze zastosuje errorClass, ale activeClass będzie zastosowane tylko wtedy, gdy isActive jest prawdziwe.

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

<div :class="[{ active: 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 na komponencie z pojedynczym elementem głównym, klasy te zostaną dodane do elementu głównego komponentu i połączone z wszystkimi istniejącymi już 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 dodaj kilka klas podczas korzystania z niego:

<!-- when using the component -->
<MyComponent class="baz boo" />

Wyrenderowany kod HTML będzie miał postać:

<p class="foo bar baz boo">Hi</p>

To samo dotyczy wiązań klas:

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

Gdy isActive jest prawdziwe, renderowany HTML będzie taki:

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

Jeśli komponent ma wiele elementów głównych, należy określić, który z nich otrzyma tę klasę. Można to zrobić za pomocą właściwości komponentu $attrs:

<!-- szablon MyComponent używający $attrs -->
<p :class="$attrs.class">Hi!</p>
<span>To jest komponent dziecka</span>

<MyComponent class="baz" />

Will render:

<p class="baz">Hi!</p>
<span>To jest komponent dziecka</span>

Więcej informacji na temat dziedziczenia atrybutów komponentów można znaleźć w sekcji Atrybuty komponentów.

Wiązanie stylów inline #

Wiązanie z obiektami #

:style wspiera wiązanie z wartościami obiektów JavaScript - odpowiada właściwości HTML element style:

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

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

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

Mimo jest zalecana składnia camelCase, :style obsługuje również składnię właściwości CSS kebab-cased (odpowiada to temu, jak są one używane 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, dzięki czemu szablon jest bardziej przejrzysty:

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

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

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

Ponownie, wiązanie w stylu obiektowym jest często używane w połączeniu z właściwościami obliczanymi (computed properties), które zwracają obiekty.

Wiązanie z tablicami #

Możemy powiązać :style z tablicą wielu obiektów stylów. Obiekty te zostaną połączone i zastosowane do tego samego elementu:

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

Autoprefiksowanie #

Gdy używasz właściwości CSS, która wymaga przedrostka vendor prefix w :style, Vue automatycznie doda odpowiedni przedrostek. Vue robi to poprzez sprawdzenie w czasie uruchamiania, które właściwości stylu są obsługiwane w bieżącej przeglądarce. Jeśli przeglądarka nie obsługuje danej właściwości, wówczas testowane są różne warianty prefiksów, aby znaleźć taki, który jest obsługiwany.

Wielokrotne wartości #

Do właściwości stylu można podać tablicę wielu (poprzedzonych prefiksem) wartości, na przykład:

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

Spowoduje to wyrenderowanie tylko ostatniej wartości w tablicy, którą obsługuje przeglądarka. W tym przykładzie zostanie wyświetlone display: flex dla przeglądarek, które obsługują niefiksowaną wersję flexbox.