您好,登錄后才能下訂單哦!
今天小編給大家分享一下vue怎么實(shí)現(xiàn)div contenteditable=“true”效果的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
發(fā)現(xiàn)問題
在 vue2 中對(duì)表單控件有著良好的雙向數(shù)據(jù)綁定機(jī)制,但是對(duì)于要特定實(shí)現(xiàn)某些功能的輸入時(shí),我們就不得不使用到 contenteditable="true" 的 div ,而在這個(gè) div 上是使用 v-model 是沒有效果的。那么問題就來了,輸入是非常需要雙向綁定的,這里的雙向數(shù)據(jù)綁定該如何實(shí)現(xiàn)?
解決思路一:自定義指令
當(dāng)然,說在這一段的前面,這種解決方式在 vue2 中是不行的,為什么這么說,因?yàn)楝F(xiàn)在去搜索這個(gè)問題絕大多數(shù)的搜索結(jié)果是這個(gè),所以放在前面。
實(shí)現(xiàn)的原理以及為什么不能用了
原理:自定義一個(gè)雙向數(shù)據(jù)綁定的指令,代碼如下:
Vue.directive('demo', { twoWay: true, bind: function () { this.handler = function () { this.set(this.el.innerHTML) }.bind(this) this.el.addEventListener('input', this.handler) }, update: function (newValue, oldValue) { this.el.innerHTML = newValue || '' }, unbind: function () { this.el.removeEventListener('input', this.handler) } })
至于 this 下的這些方法,在 vue 官網(wǎng)上可能不太容易找到,因?yàn)檫@些是 vue1 中的內(nèi)容,而在 vue2 中已經(jīng)被移除了。所以在 vue2 中我們是不能這么干的,當(dāng)然如果你使用的是 vue1 那么完全沒問題,直接拿去用即可。
解決思路二:使用組件
單獨(dú)聲明一個(gè)組件,在組件內(nèi)部處理數(shù)據(jù)(也就是innerHTML),并將數(shù)據(jù)返回給父組件。
代碼如下:
<template> <div contenteditable="true" v-html="innerText" @input="changeText"></div> </template> <script> export default { props: ['value'], data(){ return {innerText:this.value} }, methods:{ changeText(){ this.innerText = this.$el.innerHTML; this.$emit('input',this.innerText); } } } </script>
然后在父組件中直接使用 v-model 就可以了(這里我把組件名稱定義成了 v-edit-div)。
<template> <div> <v-edit-div v-model='text'></v-edit-div> <span>{{text}}</span> </div> </template> <script> export default { data(){ return { text:'改一下試一試', } } } </script>
Vue具體輕量級(jí)框架、簡(jiǎn)單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢(shì),Vue中頁面使用的是局部刷新,不用每次跳轉(zhuǎn)頁面都要請(qǐng)求所有數(shù)據(jù)和dom,可以大大提升訪問速度和用戶體驗(yàn)。
以上就是“vue怎么實(shí)現(xiàn)div contenteditable=“true”效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。