javascript - 为什么后面更新数据时v-if不受影响？

Question

如果我要创建一个如下所示的元素:

<div id="helloWorldDiv" v-if="visible">
    Hello World
</div>

然后为其创建一个 Vue 实例:

var helloWorld = new Vue({
  el: "#helloWorldDiv",
  data: {
    visible: false
  }
});

我希望行“helloWorld.visible = true;”会显示该元素，但它没有效果。谁能解释一下为什么这不起作用？

JSFiddle

Answer 1

我认为您已经开始使用 Vue.js，这太棒了!

您需要在示例应用程序中进行几项更改。检查这个 fiddle :https://jsfiddle.net/mani04/f20Ld806/

正如您在该示例中看到的，您的 show() 函数需要在 Vue 应用程序的 methods 内定义。此外，显示按钮需要成为应用模板的一部分，而不是在其外部。

您可以在 Vue 在线文档和教程中找到更多信息。