Почему блоки v-if и v-else не скрывают обьект в зависимости от значения?

Question

[Герман Коффман]

Здравствуйте. Начал учить js, html, сейчас начал учить vue.
( vue.js подключаю так:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

в блоке head)
Появился вопрос при изучении условных операторов.
Код в html:

<div id="vueElement">
    <button v-on:onclick="status = !status">Скрыть / Показать</button>
    <p v-if="status">Status is true!</p>
    <p v-else>Status is false!</p>
  </div>

Код js:

new Vue ({
  el: "vueElement",
  data: {
    status: true
    }
});

При нажатии на кнопку поле status должно меняться на противоположное значение, а при изменении переменной и при открытия сайта должна пропадать одна из надписей в зависимости от значения поля, чего не происходит. Консоль чиста, не ошибок не предупреждений.

Answer 1

[iBird Rose]

el: "vueElement", заменить на el: "#vueElement",
<button v-on:onclick="status = !status"> заменить на <button v-on:click="status = !status">

Comments

[Герман Коффман]

Спасибо! А почему же так? Этому есть какое объяснение или просто надо?) Кстати хороший статус)

[iBird Rose]

Герман Коффман, ну синтаксис такой у vue. по другому не сработает. т.е. да, просто надо)

[Герман Коффман]

iBird Rose, понятно)
Спасибо)