Вернуться назад

Классы

В следующем примере мы по нажатию на кнопку активируем и деактивируем применение стиля к элементу <div>.

<!-- index.html -->

<p>Просто строка для наглядности - чтобы на странице хоть что-то было.</p>

<div id="app">
    <div v-bind:class="{ [myStyle]: isActive}">Сообщение, к которому должен примениться стиль.</div>
    <button v-on:click="toggleStyle">Кнопка</button>
</div>

<script type="module" src="vue_example.js"></script>

/* main.css */

.kaka1 {
   color: red;
}

// vue_example.js

import { createApp, ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
    setup() {
        const myStyle = "kaka1";
        const isActive = ref(true);
        function toggleStyle() {
            isActive.value = !isActive.value;
        }
        return {
            myStyle,
            isActive,
            toggleStyle
        }
    }
});

kukuruza.mount("#app");

Несколько классов одновременно

Можно применять/отключать сразу несколько классов одновременно:

<!-- index.html -->

<p>Просто строка для наглядности - чтобы на странице хоть что-то было.</p>

<div id="app">
    <!-- Присваиваем двум классам булевые переменные -->
    <div v-bind:class="{ kaka1: kaka1IsActive, kaka3: kaka3IsActive }">Сообщение, к которому должен примениться стиль.</div>
</div>

<script type="module" src="vue_example.js"></script>

/* main.css */

.kaka1 {
   color: red;
}
.kaka3 {
   text-decoration: underline;
}

// vue_example.js

import { createApp } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
    setup() {
        // активируем два класса:
        const kaka1IsActive = true;
        const kaka3IsActive = true;
        return {
            kaka1IsActive,
            kaka3IsActive
        }
    }
});

kukuruza.mount("#app");

То же самое, но объект создаём заранее в JavaScript

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

<!-- index.html -->

<p>Просто строка для наглядности - чтобы на странице хоть что-то было.</p>

<div id="app">
    <!-- Передаём классу уже созданный в JS реактивный объект -->
    <div v-bind:class="classObject">Сообщение, к которому должен примениться стиль.</div>
</div>

<script type="module" src="vue_example.js"></script>

// vue_example.js

import { createApp, reactive } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
    setup() {
        const kaka1IsActive = true;
        const kaka3IsActive = true;
        // создаём реактивный объект и присваеваем классам булевые значения
        const classObject = reactive({
            kaka1: kaka1IsActive,
            kaka3: kaka3IsActive
        });
        return {
            classObject
        }
    }
});

kukuruza.mount("#app");

computed

Такой же пример, но со свойством computed

<!-- index.html -->

<p>Просто строка для наглядности - чтобы на странице хоть что-то было.</p>

<div id="app">
    <div v-bind:class="classObject">Сообщение, к которому должен примениться стиль.</div>
</div>

<script type="module" src="vue_example.js"></script>

//vue_example.js

import { createApp, ref, computed } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
    setup() {
        const error = ref(false);
        const kaka1IsActive = ref(true);
        const kaka3IsActive = ref(true);
        const classObject = computed(() => ({
            kaka1: kaka1IsActive.value && !error.value,
            kaka3: kaka3IsActive.value
        }));
        return {
            classObject
        }
    }
});

kukuruza.mount("#app");

Меняем классы по кругу

kaka1 -> kaka2 -> выключаем классы

<!-- index.html -->

    <p>Просто строка для наглядности - чтобы на странице хоть что-то было.</p>

    <div id="app">
        <div v-bind:class="currentClass">Сообщение, к которому должен примениться стиль.</div>
        <button v-on:click="toggleStyle">Кнопка</button>
    </div>

    <script type="module" src="vue_example.js"></script>

/* main.css */

.kaka1 {
   color: red;
}
.kaka2 {
   color: blue;
}

// vue_example.js

import { createApp, ref } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

const kukuruza = createApp({
    setup() {
        const classes = ["kaka1", "kaka2", ""];
        const index = ref(0);
        const currentClass = ref(classes[index.value]);
        function toggleStyle() {
            // Если index.value > 2, то присваиваем index.value опять 0
            index.value = (index.value + 1) % classes.length;
            currentClass.value = classes[index.value];
        }
        return {
            currentClass,
            toggleStyle
        }
    }
});

kukuruza.mount("#app");