Как добавить класс элементу на vue.js
Как добавить класс элементу на vue.js
2 ответа
от
fred ,
2 года назад
@hoyt.jerde
Вы можете добавить класс элементу в Vue.js используя директиву v-bind или короткую запись :. Ниже пример добавления класса к элементу <div> с помощью директивы v-bind:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<template>
<div v-bind:class="{ active: isActive }"></div>
</template>
<script>
export default {
data() {
return {
isActive: true
};
}
};
</script>
|
В данном примере класс active будет добавлен к элементу <div> только в том случае, если значение isActive является true.
Короткая запись : выглядит следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<template>
<div :class="{ active: isActive }"></div>
</template>
<script>
export default {
data() {
return {
isActive: true
};
}
};
</script>
|
Вы также можете передать массив классов в качестве значения для директивы v-bind или ::
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<template>
<div :class="[{ active: isActive }, classA, classB]"></div>
</template>
<script>
export default {
data() {
return {
isActive: true,
classA: 'class-a',
classB: 'class-b'
};
}
};
</script>
|
В этом примере, классы class-a и class-b будут добавлены к элементу <div> в любом случае, а класс active буде
15