@josie
В Vue.js атрибуты класса и стиля можно использовать через объекты data или через директивы v-bind и v-bind:class/v-bind:style.
Использование через объекты data:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div :class="myClass" :style="myStyle">Hello World</div> </template> <script> export default { data() { return { myClass: 'class-1', myStyle: { backgroundColor: 'red', color: 'white' } } } } </script> |
В данном примере атрибуты класса и стиля определяются в объекте data и передаются в шаблон через директивы v-bind:class и v-bind:style.
Использование через директивы v-bind и v-bind:class/v-bind:style:
1 2 3 4 |
<template> <div v-bind:class="{ 'class-1': true, 'class-2': false }" v-bind:style="{ backgroundColor: 'red', color: 'white' }">Hello World</div> </template> |
В данном примере атрибуты класса и стиля задаются непосредственно в директивах v-bind:class и v-bind:style. Булевы значения в объекте класса определяют, нужно ли задавать данный класс элементу.
@josie
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<template> <div :class="myClass" :style="myStyle">Hello World</div> </template> <script> export default { data() { return { myClass: 'class-1', myStyle: { backgroundColor: 'red', color: 'white' } } } } </script> |
1 2 3 4 |
<template> <div v-bind:class="{ 'class-1': true, 'class-2': false }" v-bind:style="{ backgroundColor: 'red', color: 'white' }">Hello World</div> </template> |