使用vue插件怎么實現(xiàn)v-model功能-創(chuàng)新互聯(lián)
本篇文章為大家展示了使用vue插件怎么實現(xiàn)v-model功能，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：
域名申請、網(wǎng)絡(luò)空間、營銷軟件、網(wǎng)站建設(shè)、
城關(guān)網(wǎng)站維護(hù)、網(wǎng)站推廣。
v-model語法：
在vue中我們實現(xiàn)表單的雙向綁定時代碼一般時這樣寫的：
data () {
return {
value: '222'
}
}
可以通過這樣的方式實現(xiàn)value的值和輸入框中的值雙向綁定了。
事實上v-model只是一個語法糖，他的真正實現(xiàn)是這樣的：
以上代碼分幾個步驟：
1.將輸入框的值綁定到變量上，這個是單向綁定，意味著改變變量的值可以改變輸入框的值，但是改變輸入框的值不能改變變量的值
2.監(jiān)聽input事件（input輸入框都有該事件，當(dāng)輸入內(nèi)容時自動觸發(fā)該事件），當(dāng)輸入框輸入內(nèi)容就單向改變變量的值了
自定義編輯器雙向綁定
這個是插件的寫法：content是雙向綁定的值 height是指編輯器的高度
插件vue的寫法：
在div中設(shè)置contenteditable屬性時把div設(shè)置成可編輯的輸入框，v-html是給編輯器單向綁定變量contentHtml值，input方法獲取編輯器的內(nèi)容并且返回給父元素的input方法：
changeText () {
const htmlString = this.$refs.editor.innerHTML
this.$emit('input', htmlString)
},其他問題：
光是這樣是不能夠解決問題的，編輯器你會出現(xiàn)每次輸入的時候都會跳到開頭位置：怎么解決呢？不多說上代碼：
props: {
value: {
type: String,
default: ''
},
height: {
type: String,
default: 'auto'
}
},
data () {
return {
// 編輯器內(nèi)容
contentHtml: this.value || this.value === 0 ? this.value : '
',
// 是否在編譯
isLocked: true,
// 光標(biāo)位置
lastEditRange: null
}
},
watch: {
value (val) {
if (!this.isLocked) {
this.contentHtml = this.value;
}
}
}寫到這里大家應(yīng)該一頭霧水這樣寫有什么用：因為還少了一些代碼：
// 編輯器失去焦點
blurEditor (event) {
this.isLocked = false
},
// 編輯器獲得焦點
focusEditor (event) {
this.isLocked = true
},
上述內(nèi)容就是使用vue插件怎么實現(xiàn)v-model功能，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
本文題目：使用vue插件怎么實現(xiàn)v-model功能-創(chuàng)新互聯(lián)
文章路徑：
http://weahome.cn/article/ddshgh.html
重慶分公司
重慶分公司
