vue中div模拟文本编辑器并且实现v-model功能
Posted wuyexuetu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中div模拟文本编辑器并且实现v-model功能相关的知识，希望对你有一定的参考价值。
说明一下实现div模拟文本编辑器实现v-model数据的双向绑定而不用input的原因 因为div使用v-html绑定的数据中是可以嵌套标签的列入
使用v-html进行数据的绑定自定义的标签并不会被过滤掉。
v-model 是 Vue 框架提供的众多指令中的一个，其主要作用是可以实现在表单 <input>、<textarea> 及 <select> 标签元素上创建双向数据绑定。但是当我们但是当我们使用div添加contenteditable="true"属性实现编辑的功能并不能绑定v-model实现数据的双向绑定
<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的数据已经发生了改变以上是关于vue中div模拟文本编辑器并且实现v-model功能的主要内容，如果未能解决你的问题，请参考以下文章
Vue 2 contentEditable 与 v-model