Укладка Vue.js компоненты, использующие CSS

Примечание: в этом руководстве используется Vue.js Компоненты Одного Файла

Самый простой вариант добавления CSS в Vue.js компонент должен использовать тег style , как в HTML:

Это столько статики, сколько вы можете получить. Что делать, если вы хотите, чтобы подчеркивание было определено в данных компонента? Вот как вы можете это сделать:

:стиль является сокращением для v-привязка:стиль . Я буду использовать эту стенографию на протяжении всего этого урока.

Обратите внимание, как нам пришлось обернуть оформление текста в кавычки. Это происходит из-за тире, которое не является частью допустимого идентификатора JavaScript.

Вы можете избежать цитаты, используя специальный синтаксис camelCase, который Vue.js включает и переписывает его в оформление текста :

Вместо привязки объекта к стилю , вы можете ссылаться на вычисляемое свойство:

Компоненты Vue генерируют простой HTML, поэтому вы можете добавить класс к каждому элементу и добавить соответствующий селектор CSS со свойствами, которые его стилизуют:

Вы можете использовать CSS следующим образом:

Вы можете жестко запрограммировать класс, как в приведенном выше примере, или вы можете привязать класс к свойству компонента, чтобы сделать его динамическим, и применять к этому классу только в том случае, если свойство data имеет значение true:

Вместо привязки объекта к классу, как мы делали с Привет! , вы можете напрямую связать строку, и это будет ссылаться на свойство данных:

Вы можете назначить несколько классов, либо добавив два класса в класс абзаца в этом случае, либо используя массив:

То же самое можно сделать с помощью объекта, встроенного в привязку класса:

И вы можете объединить эти два утверждения:

Вы также можете использовать вычисляемое свойство, возвращающее объект, которое лучше всего работает, когда у вас есть много классов CSS для добавления в один и тот же элемент:

Обратите внимание, что в вычисляемом свойстве вам необходимо ссылаться на данные компонента с помощью this.[имя свойства] , в то время как в шаблоне свойства данных удобно помещаются как свойства первого уровня.

Любой CSS, который не закодирован жестко, как в первом примере, будет обработан Vue, и Vue выполняет хорошую работу по автоматическому добавлению префикса CSS для нас, поэтому мы можем писать чистый CSS, все еще ориентируясь на старые браузеры (что по-прежнему означает браузеры, которые поддерживает Vue, поэтому IE9+)

Оригинал: “https://flaviocopes.com/vue-css/”