vue中div模拟文本编辑器并且实现v-model功能

说明一下实现div模拟文本编辑器实现v-model数据的双向绑定而不用input的原因因为div使用v-html绑定的数据中是可以嵌套标签的列入使用v-html进行数据的绑定自定义的标签并不会被过滤掉。

v-model 是 Vue 框架提供的众多指令中的一个，其主要作用是可以实现在表单、及 <select> 标签元素上创建双向数据绑定。但是当我们但是当我们使用div添加contenteditable="true"属性实现编辑的功能并不能绑定v-model实现数据的双向绑定</code></p> <pre><code><body> <div class="" id="vue-template" > <li v-for="(site, i) in testContent"> <div class="div-editable" contenteditable="true" v-html="testContent[i]" @input="changeText(testContent[i]=$event.target.innerHTML)"></div> </li> <input> </div> </body> <script type="text/javascript"> //当然实现这种div模拟v-model的方法你也可以直接使用组建，组建是可以使用v-model的 var app = new Vue({ el: '#vue-template', data:{ testContent: ['dreams<span class="heightLight">qin1</span>','dreamsqin3','dreamsqin4'], innerText:this.testContent, isChange: true, }, watch: { value() { console.log(12321) if (this.isChange) { this.innerText = this.value console.log(1111) console.log(this.value) } } }, methods: { changeText(e) { console.log(this.testContent) }, blurFunc() { this.isChange = true this.$emit('blurFunc') }, }, }) </script> //当你输入的时候可以发现输出的结果中data的数据已经发生了改变 </code></pre> </div>  <div class="p-2"></div> <div class="arcinfo my-3 fs-7 text-center"> <a href='/t/etagid335-0.html' class='tagbtn' target='_blank'>vue.js</a> </div> <div class="p-2"></div> </div> <div class="p-2"></div>  <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle"><h2 class="fs-4">相关</h2></div> <hr> <div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-548560.html">vue.js 3.2.22：菜单每行依次滑动出现的动画</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-547140.html">初识Vue.js</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-476751.html">flowable 工作流 Springboot vue.js 整合框架项目源码</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-468611.html">Vue.js 类型(数字、整数、小数、负数、手机号、座机号等)校验规则</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-443794.html">Vue.js小Demo--单选和复选功能实现</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-426340.html">Vue.js——vue-router 快速入门</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-420589.html">Vue.js——基于ajax实现数据的跨域增删查改</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-361075.html">Vue.js笔记(一)</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-347151.html">vue.js 本地调用远程接口进行开发，如何进行跨域及cookie传递</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-337075.html">Idea 引用vue.js后没有代码提示</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-322717.html">谷歌浏览器如何安装Vue.js devtools</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div><div class="row g-0 py-2 border-bottom align-items-center"> <div class="col-7 col-lg-11 border-lg-end"> <h3 class="fs-6 mb-0 mb-lg-2"><a href="/a/1-322077.html">Vue.js 带下拉选项的输入框（Textbox with Dropdown）组件</a></h3> <div class="ltag fs-8 d-none d-lg-block"> </div> </div> </div>   </div>  </div> <div class="col-lg-3 col-12 p-0 ps-lg-2">     <div class="lbox p-4 shadow-sm rounded-3"> <div class="boxtitle pb-2"><h2 class="fs-4"><a href="#">标签</a></h2></div> <div class="clearfix"></div> <ul class="m-0 p-0 fs-7 r-tag"> </ul> <div class="clearfix"></div> </div>  </div> </div> </div> </main> <div class="p-2"></div> <footer> <div class="container-fluid p-0 bg-black"> <div class="container p-0 fs-8"> <p class="text-center m-0 py-2 text-white-50">一品网 <a class="text-white-50" href="https://beian.miit.gov.cn/" target="_blank">冀ICP备14022925号-6</a></p> </div> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?6e3dd49b5f14d985cc4c6bdb9248f52b"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </footer> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script> </body> </html>