ReferenceError: ok не определено

я недавно узнал о vue У меня есть этот файл index.html

<!DOCTYPE html>
<html>
<head>
    <title>Learning Vue Js</title>
    <link rel = "stylesheet" type = "text/css" href = "style.css">
</head>
<body>
<div id = "root"> 
    <button @click = "show = !show">Toggle</button>
    <div class = "foo" v-show = "ok">
        <p>ok</p>
    </div>
</div>

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

<script type = "text/javascript">
    var app = new Vue({
    el: "#root",
    data: {
        ok: false
    }
});

</script>
</body>
</html>

ok четко определено в data, а show нет.

— 16.03.2019 20:56

html css vue.js

16.03.2019 19:49

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

213

Ответы 2

Попробуй это

new Vue({
  el: "#root",
  data: { ok: false }
});

<script src = "https://cdn.jsdelivr.net/npm/vue"></script>
<div id = "root"> 
    <button @click = "ok= !ok">Toggle</button>
    <div class = "foo" v-show = "ok">
        <p>ok</p>
    </div>
</div>

16.03.2019 20:13

Здесь:

<button @click = "ok = !ok">Toggle</button>
<div class = "foo" v-if = "ok">
    <p>ok</p>
</div>

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

— 17.03.2019 04:26

16.03.2019 20:53