Руководство о том, как разместить переменные JavaScript прямо в вашем CSS с помощью Composition API Vue 3.

Если вы используете Vue.js, возможно, вам приходилось применять разные классы к тегам в зависимости от логики вашего кода. Это потому, что мы можем захотеть реактивно обновить класс элемента в зависимости от определенных условий. Например, предположим, что если для переменной check задано значение true, мы хотим, чтобы div отображалось красным, а в противном случае оно должно быть синим. Для таких случаев использования обычно используется следующий код:

<div :class="check === true ? 'red' : 'blue'">
    Hello World
</div>

Знаете ли вы, однако, что вы можете поместить реактивные переменные Vue.js прямо в свой CSS с помощью Vue 3? Мы должны использовать API композиции (подробнее: разница между API композиции и API опций), но как только мы это сделаем, мы сможем избежать приведенного ниже кода и поместить нашу переменную прямо в наш CSS.

Давайте рассмотрим простой пример. Предположим, у нас есть следующий скрипт в нашем шаблоне Vue.js:

<script setup>
import { ref } from 'vue'
const check = true;
let color = ref('#ff0000');
if(check == true) {
  color.value = '#0000ff';
}
</script>
<template>
  <input value="Hello World" />
</template>

Просто, верно? Если check равно true, переменная color равна '#0000ff'. В противном случае это «#ff0000». В нашем CSS с Vue 3 теперь мы можем напрямую ссылаться на color, используя v-bind:

<style>
  input {
    color: v-bind(color)
  }
</style>

Теперь, если color обновляется реактивно, color ввода изменится на то, на что установлена ​​переменная color. Это означает, что вы можете избежать некоторой неловкой логики в своих HTML-тегах и начать использовать переменные JavaScript прямо в вашем CSS — и я думаю, что это довольно круто.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.