Question

我使用VueJS通过Vue实例中定义的数据设置元素的内容：

<p id="hello">
    {{ message }}
</p>

如何完全替换此类元素的内容（在上面{{ message }}的情况下放弃之前的内容），将<p>转换为例如

<p id="hello">
     The replacement text
</p>

在jQuery中我会调用$("#hello").html("the replacement text"); - VueJS中的等价物是什么？

Answer 1

Vue是MVVM，因此您可以将数据映射到视图。您可以使用v-html替换HTML，但您的html必须存储在您的虚拟机中，并且不建议这样做：

HTML：

<div id="app">
  <span v-html="message"></span>
  <button v-on:click="newHtml">Change HTML</button>
</div>

使用Javascript：

new Vue({
  el: "#app",
  methods: {
    newHtml() {
      this.message = '<p style="color:red;">New Message</p>';
    }
  },
  data: {
    message: "<p>Message</p>"
  }
});

继承人JSFiddle：https://jsfiddle.net/e07tj1sa/

真的，有了vue，你应该试着摆脱jQuery的思考，它们在概念上是不同的。在vue中，首选方法是使用可重用组件构建应用程序，而不是直接影响DOM中的html。

https://vuejs.org/guide/components.html#What-are-Components

Answer 2

有很多方法可以做到这一点。基本上你必须直接将属性更改为数据对象

https://jsbin.com/wexehasege/1/edit?html,js,output

因此，您可以创建更改消息的新方法，然后在创建实例后使用created（）生命周期钩子调用它。

如何替换元素的内容？

2 个答案: