Руководство о том, как разместить переменные 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.