本文介绍了Content edable div追加一个html元素，并在Vuejs中对其进行v建模的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的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-1.medium.com/max/853/1*FH12a2fX61aHOn39pff9vA.jpeg" alt="" width=200px>';
}
}
});
问题是，当我单击按钮将html标记(Img)推送到我的变量(Html)时，它就起作用了。但在输入后，它将删除插入的标签部分。这是在Vue中成功添加到html代码的方法吗？
推荐答案
主要问题：
该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-1.medium.com/max/853/1*FH12a2fX61aHOn39pff9vA.jpeg" alt="" width=200px>';
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/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追加一个html元素，并在Vuejs中对其进行v建模的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！