使用vue插件怎么實現(xiàn)v-model功能

本篇文章為大家展示了使用vue插件怎么實現(xiàn)v-model功能，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

v-model語法：

在vue中我們實現(xiàn)表單的雙向綁定時代碼一般時這樣寫的：

<input type="text" v-model="value" >
data () {
 return {
 value: '222'
 }
}

可以通過這樣的方式實現(xiàn)value的值和輸入框中的值雙向綁定了。

事實上v-model只是一個語法糖，他的真正實現(xiàn)是這樣的：

<input type="text" :value="value" @input="value=$event.target.value">

以上代碼分幾個步驟：

1.將輸入框的值綁定到變量上，這個是單向綁定，意味著改變變量的值可以改變輸入框的值，但是改變輸入框的值不能改變變量的值

2.監(jiān)聽input事件（input輸入框都有該事件，當輸入內(nèi)容時自動觸發(fā)該事件），當輸入框輸入內(nèi)容就單向改變變量的值了

自定義編輯器雙向綁定

這個是插件的寫法：content是雙向綁定的值 height是指編輯器的高度

<editor v-model="content" :height="editorHeight"></editor>

插件vue的寫法：

<div v-bind: class="editor-box" ref="editor" contenteditable v-html="contentHtml" @input="changeText"></div>

在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 : '<div><br></div>',
  // 是否在編譯
  isLocked: true,
  // 光標位置
  lastEditRange: null
 }
 },
 watch: {
 value (val) {
  if (!this.isLocked) {
  this.contentHtml = this.value;
  }
 }
 }

寫到這里大家應(yīng)該一頭霧水這樣寫有什么用：因為還少了一些代碼：

 <div v-bind: class="editor-box" ref="editor" contenteditable v-html="contentHtml" @input="changeText" @focus="focusEditor" @blur="blurEditor"></div>
 // 編輯器失去焦點
 blurEditor (event) {
  this.isLocked = false
 },
 // 編輯器獲得焦點
 focusEditor (event) {
  this.isLocked = true
 },

上述內(nèi)容就是使用vue插件怎么實現(xiàn)v-model功能，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。