vue可编辑div_vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题
在 vue2 中对表单控件有着良好的双向数据绑定机制，但是对于要特定实现某些功能的输入时，我们就不得不使用到 contenteditable="true" 的 div ，而在这个 div 上是使用 v-model 是没有效果的。那么问题就来了，输入是非常需要双向绑定的，这里的双向数据绑定该如何实现？
解决思路一：自定义指令
当然，说在这一段的前面，这种解决方式在 vue2 中是不行的，为什么这么说，因为现在去搜索这个问题绝大多数的搜索结果是这个，所以放在前面。
实现的原理以及为什么不能用了
原理：自定义一个双向数据绑定的指令，代码如下：
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 官网上可能不太容易找到，因为这些是 vue1 中的内容，而在 vue2 中已经被移除了。所以在 vue2 中我们是不能这么干的，当然如果你使用的是 vue1 那么完全没问题，直接拿去用即可。
解决思路二：使用组件
单独声明一个组件，在组件内部处理数据(也就是innerhtml)，并将数据返回给父组件。
代码如下：
v-html="innertext"
@input="changetext">
export default {
props: ['value'],
data(){
return {innertext:this.value}
},
methods:{
changetext(){
this.innertext = this.$el.innerhtml;
this.$emit('input',this.innertext);
}
}
}
然后在父组件中直接使用 v-model 就可以了(这里我把组件名称定义成了 v-edit-div)。
{{text}}
export default {
data(){
return {
text:'改一下试一试',
}
}
}
至于为什么可以直接用 v-model ,看官网的 api 吧。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
希望与广大网友互动？？
点此进行留言吧！
vue可编辑div_vue2 如何实现div contenteditable=“true”(类似于v-model)的效果相关推荐
- 富文本编辑器，可编辑div contentEditable=true，光标位置window.getSelection
在近期项目中,需要在一个实时通信软件中,在发送消息时支持发送加粗的消息,现在总结一下使用心得. 需求: 在发送消息时,点击加粗图标,图标添加选中效果,输入的文字.添加的文字表情.@人员都需要显示为加粗 ...
- 关于可编辑div contentEditable=true 添加表情光标设置问题
web版的聊天室对与前端来说真的是一个头疼的问题,特别是输入框显示表情,需要contentEditable属性来显示,但是contentEditable又有光标问题,插入的表情无法在光标下插入,会自动 ...
- android仿微信图片编辑器,electron/vue可编辑框contenteditable|仿微信截图
基于Electron+vue实现div可编辑contenteditable插入表情|electron-vue截图功能 为了避免使用 vue 手动建立起 electron 应用程序.electron-v ...
- 使用contenteditable=“true“改造div可编辑文本框
使用contenteditable="true"改造div可编辑文本框,并去除粘贴复制的格式问题 contenteditable="true" 可编辑 cont ...
- vue 在线编辑excel表格（原生和使用组件的两种方式）
vue 在线编辑excel表格(原生和使用组件的两种方式) top表头和left表头格式的表格 <template><div><!-- 用组件写的编辑表格 -->& ...
- VUE 在线编辑 EXCEL , SPERADJS的使用
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一.VUE 在线编辑 EXCEL 功能 二.使用步骤 1.引入库 2.组件制作 前言 spreadjs的使用 提示:以 ...
- 开启html元素的编辑模式contenteditable=true
开启html元素的编辑模式contenteditable="true" 转载于:https://www.cnblogs.com/yangchongxing/p/7642407.ht ...
- vue可以编辑发布多长的视频_vue可以拍多长的视频_vue怎么注册
Beijing vue des photographes étranger 2012-L 450x311 - 151KB - JPEG 重新定义电视?索尼推出PlayStation Vue服务 - 5 ...
- vue图片在设置好的div里面自动适应宽高，显示全部图片，不够的留空白
vue图片在设置好的div里面自动适应宽高,图片显示全部,不够宽高的留空白 <div class="rightullidiv"><img:src="it ...
最新文章
- 青少年电子信息智能创新大赛 赛项说明（Scratch编程创新挑战赛）
- python第三方库无法下载_无法使用从PyCharm中下载的第三方库
- MFC菜鸟学编程——第一篇
- StarlingMVC Framework 原理。。。
- 文巾解题 175. 组合两个表
- KMP算法 hdu 1711 hdu 2203
- 如何解读决策树和随机森林的内部工作机制？
- yii mysql 主从_mysql主从同步实践YII
- 2020.07.08_Multi-passage BERT: A Globally Normalized BERT Model for Open-domain Question Answering
- 如何把Web缓存都充分利用上来？
- 计算机学情分析万能模板,信息技术的教学计划以及学情分析
- python进阶之内置方法
- linux sd卡写文件速度慢,请问硬核写sd卡速度有什么提高的好方法
- Netty：原理架构解析
- 图解HTTP-HTTP
- 优化 Flash 性能
- 为什么 wps输入文字 是红色下划线的 ？？？？？？？？？？？
- python-docx对Word文档的指定位置(批量)插入图片
- 计算机快速切换快捷键,窗口切换快捷键,详细教您电脑窗口切换小技巧是什么...
- 小程序登录授权获取用户信息