Question

我不知道如何使用v-html保存现有内容。例如：

<div ref="content" v-html="content">Hello, World! A lot of divs</div>

仅当我用div分配一个非null的值时，如何替换content的内容？或如何以其他方式做到这一点？还是异步请求div内容的单一方法？

当然，下一种方法可行，但是我丢失了数据绑定。

this.$refs['content'].innerHTML = "New content";

P.S。。我正在从jQuery迁移，但仍然无法清楚地理解Vue.js的哲学。

Answer 1

准确地说，您必须阅读vue documentation。
在您的组件中，您必须在content中声明data，并在其他位置（即在按钮的单击处理程序或组件的方法内部）进行更改：

new Vue({
  el: "#root",
  data: function () {
     return { 
       content: 'Hello, World! A <b>lot</b> of divs'
     };
  },
  methods: {
     changeText: function() {            
        this.content = 'This text from component';
     }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="root"> 
    <div v-html="content"></div>        
    <button v-on:click="content = 'This text from button'">Click me</button>
    <button v-on:click="changeText">And me</button>
</div>

Answer 2

您可以为content指定一个默认值。

data () {
  return {
    content: 'Hello, World! A lot of divs'
  }
}

当您将新值分配给content时，它将被呈现。

另一种方法是检查content是否不为null并使用v-if/v-else进行条件渲染的2个不同的div。

<div v-if="content" v-html="content"></div>
<div v-else>Hello, World! A lot of divs</div>

和脚本

export default {
  name: 'customComponent',
  data () {
     return {
       content: null
     }
  }
}

如何保存现有内容？

2 个答案: