如何替换元素的内容？

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,因此您可以将数据映射到视图.您可以用HTML替换HTML v-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