vue2 如何实现div contenteditable=“true”(类似于v-model)的效果


Posted in Javascript onFebruary 08, 2017

发现问题

在 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),并将数据返回给父组件。

代码如下:

<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>

至于为什么可以直接用 v-model ,看官网的 API 吧。

v-model 传送门

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
Jquery ajaxsubmit上传图片实现代码
Nov 04 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
JS使用cookie实现只出现一次的广告代码效果
Apr 22 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
小程序绑定用户方案优化小结
May 15 Javascript
VUE写一个简单的表格实例
Aug 06 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
Mar 12 Javascript
js删除对象中的某一个字段的方法实现
Jan 11 Javascript
jQuery中Datatables增加跳转到指定页功能
Feb 08 #Javascript
node.js的事件机制
Feb 08 #Javascript
jQuery多选框选择数量限制方法
Feb 08 #Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 #Javascript
简单实现bootstrap选项卡效果
Feb 08 #Javascript
Bootstrap导航条学习使用(一)
Feb 08 #Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 #Javascript
You might like
PHP学习之PHP运算符
2006/10/09 PHP
PHP聊天室技术
2006/10/09 PHP
php trim 去除空字符的定义与语法介绍
2010/05/31 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
浅析PHP文件下载原理
2014/12/25 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
JavaScript中的getDay()方法使用详解
2015/06/09 Javascript
js图片卷帘门导航菜单特效代码分享
2015/09/10 Javascript
使用node+vue.js实现SPA应用
2016/01/28 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
浅谈angular4生命周期钩子
2017/09/05 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
使用url_helper简化Python中Django框架的url配置教程
2015/05/30 Python
pycharm中使用anaconda部署python环境的方法步骤
2018/12/19 Python
使用python serial 获取所有的串口名称的实例
2019/07/02 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
wxpython绘制音频效果
2019/11/18 Python
python 操作hive pyhs2方式
2019/12/21 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
人力资源经理自我评价
2014/01/04 职场文书
工作年限证明模板
2014/11/01 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
先进工作者事迹材料
2014/12/23 职场文书
小学科学教学计划
2015/01/21 职场文书
电信营业员岗位职责
2015/04/14 职场文书
2015年端午节活动策划书
2015/05/05 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB
Go Grpc Gateway兼容HTTP协议文档自动生成网关
2022/06/16 Golang