本篇文章为大家展示了使用vue插件怎么实现v-model功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。
v-model语法：
在vue中我们实现表单的双向绑定时代码一般时这样写的：
计算
安全
数据库
网络和加速
企业服务
<input type="text" v-model="value" >
data () {
return {
value: '222'
}
}可以通过这样的方式实现value的值和输入框中的值双向绑定了。
事实上v-model只是一个语法糖，他的真正实现是这样的：
<input type="text" :value="value" @input="value=$event.target.value">以上代码分几个步骤：
1.将输入框的值绑定到变量上，这个是单向绑定，意味着改变变量的值可以改变输入框的值，但是改变输入框的值不能改变变量的值
2.监听input事件（input输入框都有该事件，当输入内容时自动触发该事件），当输入框输入内容就单向改变变量的值了
自定义编辑器双向绑定
这个是插件的写法：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中设置contenteditable属性时把div设置成可编辑的输入框，v-html是给编辑器单向绑定变量contentHtml值，input方法获取编辑器的内容并且返回给父元素的input方法：
changeText () {
const htmlString = this.$refs.editor.innerHTML
this.$emit('input', htmlString)
},其他问题：
光是这样是不能够解决问题的，编辑器你会出现每次输入的时候都会跳到开头位置：怎么解决呢？不多说上代码：
props: {
value: {
type: String,
default: ''
},
height: {
type: String,
default: 'auto'
}
},
data () {
return {
// 编辑器内容
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;
}
}
}写到这里大家应该一头雾水这样写有什么用：因为还少了一些代码：
<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
},上述内容就是使用vue插件怎么实现v-model功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
