Question

我想在创建新的Vue实例后向DOM添加新元素。我知道我可以重新启动vue的实例，但这似乎不是一个好主意，因为vue必须再次重新渲染所有元素。那么，有没有一种方法可以将新元素绑定到数据作用域？

<body>
  <div id="app">
    <span>{{ a }}<span>

    <div id="newElem"></div>
  </div>
</body>

<script>

    $(document).ready(function () {
        var mainApp = new Vue({
            el: "#app",
            data: {
                "a": "aa",
                "b": "bb"    
            }
        });

        $("#newElem").html("<span>{{ b }}</span>")

    });

</script>

此代码将{{b}}解除绑定。我正在寻找一种防止这种情况的方法。

谢谢

Answer 1

您尝试过这样的事情吗？

<div v-html="newElem"></div>

el: "#app", data: { "a": "aa", "b": "bb" }, created() { this.newElem = "<span>{{ b }}</span>"; }

Answer 2

在这里很难说出您的最终目标，但我会照做的。

理想情况下，您不会接触DOM，而是想要更新数据并让Vue为您处理DOM。

我认为您想将b初始化为undefined，并在准备好将其显示时进行设置。

data: {
  a: 'aa',
  b: undefined,
}

然后在您的模板中可以有以下内容：

<span v-if="b">{{ b }}</span>

这样，直到b为真时，跨度才会显示。

然后，b准备就绪后，您将mainApp.b = 'bb'。

这是一个快速演示：http://jsfiddle.net/crswll/vtu8nzea/1/

如果您添加一个更完整的用例，我可能会进一步提供帮助。

此外，此答案也可能有帮助。有点像这种思考的下一个层次：Vuejs: v-model array in multiple input

Vuejs问题;如何绑定添加到DOM的新元素？

2 个答案: