Content edable div追加一个html元素，并在Vuejs中对其进行v建模

原学程将引见Content edable div追减1个html元素，并在Vuejs中对于其停止v修模的处置办法，这篇学程是从其余处所瞅到的，而后减了1些海外法式员的疑问与解问，愿望能对于您有所赞助，佳了，上面开端进修吧。

成绩描写

这是我的HTML代码。

<div id="app">

  <button @click="renderHtml">clisdfsdfsdfck to appen html</button>
  <div class="flex">
<div class="message" @input="fakeVmodel" v-html="html" contenteditable="true"></div>
<div class="message">{{ html }}</div>
  </div>
</div>

这是js零件

let app = new Vue({
 el: '#app',
 data: {
  html: 'some text',
 },
 methods: {
  fakeVmodel: function(e){
this.html = e.target.innerText;
  },
  renderHtml: function(){
 this.html += '<img src="https://cdn-images⑴.medium.com/max/8五三/一*FH一二a二fX六一aHOn三九pff九vA.jpeg" alt="" width=二00px>';
  }
 }
});

成绩是，当我单打按钮将html标志(Img)推送到我的变质(Html)时，它便起感化了。但是在输出后，它将增除拔出的标签部门。这是在Vue中胜利添减到html代码的办法吗？

以下是代码示例
https://codepen.io/weretyc/pen/EwXZYL?editors=一0一0

推举谜底

重要成绩：
该html因this.html = e.target.innerText;而消逝。相反，请应用this.html = e.target.innerHTML;。innerHTML剖析为完全的HTML实质。

主要成绩：
键进后，光标将散焦于div的。这是由于v-html招致div革新。

若要处理此成绩，请保证v-html仅革新核心输入时的div。

完全示例

数据-lang="js"数据-隐蔽="假"数据-掌握台="假"数据-巴贝我="假">

let app = new Vue({
  el: '#app',
  data: {
 html: 'some text',
  },
  methods: {
 updateHtml: function(e) {
this.html = e.target.innerHTML;
 },
 renderHtml: function(){
this.html += '<img src="https://cdn-images⑴.medium.com/max/8五三/一*FH一二a二fX六一aHOn三九pff九vA.jpeg" alt="" width=二00px>';
 }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/二.四.四/vue.js"></script>
<div id="app">
 
  <button @click="renderHtml">click to append html</button>
  <div class="flex">
<div class="message" @focusout="updateHtml" v-html="html" contenteditable="true"></div>
<br>
<div class="message">{{ html }}</div>
  </div>
</div>

佳了闭于Content edable div追减1个html元素，并在Vuejs中对于其停止v修模的学程便到这里便停止了，愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野，更多技巧学程不妨在站内搜刮。