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，这很棒！

您需要在示例应用中进行一些更改。检查这个小提琴：https://jsfiddle.net/mani04/f20Ld806/

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

您可以在线查看Vue文档和教程中的更多内容。

Answer 2

首先，我建议不要从外部操纵Vue实例。随着应用程序的增长，它将使维护应用程序变得更加困难。

但是，关于你的问题，你的JSFiddle有很多问题：

您从未将visible设置为true。
在show函数中，您helloWorld拼错了helloWolrd。
show函数和helloWorld变量需要附加到窗口，以便可以从onclick事件全局访问它们。

因此，如果您将javascript更新为：

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


function show() {
  helloWorld.visible = true;
};

window.helloWorld = helloWorld;
window.show = show;

您的代码按预期工作。

为什么v-if在以后更新数据时不会受到影响？

2 个答案: