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

Directives

v-if

<!-- index.html -->

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

<div id="app">
    <!-- Сообщение будет видимым, если "seen" равно "true" -->
    <div v-if="seen">Вот моё сообщение.</div>
</div>

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

// vue_example.js

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

const kukuruza = createApp({
    setup() {
        const seen = true;
        return {
            seen
        }
    }
});

kukuruza.mount("#app");

v-on:click

При нажатии кнопки сообщение пропадает:

v-on:click = @click

<!-- index.html -->

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

<div id="app">
    <div v-if="seen">Вот моё сообщение.</div>
    <button v-on:click="hideButton()">Кнопка</button>
</div>

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

// vue_example.js

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

const kukuruza = createApp({
    setup() {
        let seen = ref(true);
        function hideButton() {
            seen.value = false;
        }
        return {
            seen,
            hideButton
        }
    }
});

kukuruza.mount("#app");