Как получить стили строкой и сохранить в переменную?

В Vue.js для получения стилей строкой и сохранения их в переменную, вы можете использовать объект getComputedStyle в сочетании с помощью функции getPropertyValue().

Вот пример кода, который демонстрирует эту возможность:

<template>
  <div>
    <p ref="myElement">Пример текста</p>
  </div>
</template>

<script>
export default {
  mounted() {
    // Получаем ссылку на элемент с помощью ref
    const myElement = this.$refs.myElement;
    
    // Получаем стили элемента
    const styles = window.getComputedStyle(myElement);

    // Сохраняем заданный стиль в переменную
    const color = styles.getPropertyValue('color');
    const fontSize = styles.getPropertyValue('font-size');
    
    // Выводим сохраненные стили в консоль для проверки
    console.log(color);
    console.log(fontSize);
  }
}
</script>

В этом примере мы создаем компонент Vue, который содержит элемент <p> с определенными стилями. Затем мы получаем ссылку на этот элемент с помощью директивы ref. В методе mounted, который вызывается после монтирования компонента, мы используем getComputedStyle для получения всех примененных стилей к элементу. Затем мы сохраняем определенные стили (цвет и размер шрифта) в переменные color и fontSize соответственно.

Вы можете заменить myElement на любой другой элемент в DOM, чтобы получить его стили. Также вы можете получить и сохранить стили других свойств, а не только заданный цвет и размер шрифта.