ReferenceError: ok 没有定义答案

【问题标题】：ReferenceError: ok is not definedReferenceError: ok 没有定义
【发布时间】：2019-08-07 13:58:45
【问题描述】：

我最近了解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 没有。

标签： html css vue.js

【解决方案1】：

试试这个

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>

【讨论】：

【解决方案2】：

这里：

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

【讨论】：

不鼓励仅使用代码回答。请添加一些解释，说明这如何解决问题，或者这与现有答案有何不同。 From Review