說明一下實現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的數據已經發生了改變