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 相关文章推荐
控制打印时页眉角的代码
Feb 08 Javascript
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
Mar 03 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
微信小程序rich-text富文本用法实例分析
May 20 Javascript
layui框架与SSM前后台交互的方法
Sep 12 Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 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实现多级树型菜单
2006/10/09 PHP
批量去除PHP文件中bom的PHP代码
2012/03/13 PHP
PHP获取mysql数据表的字段名称和详细信息的方法
2014/09/27 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
谈谈JavaScript中的函数与闭包
2013/04/14 Javascript
jquery的父子兄弟节点查找示例代码
2014/03/03 Javascript
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
2015/04/15 Javascript
js实现黑色简易的滑动门网页tab选项卡效果
2015/08/31 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
2017/11/21 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
2018/12/21 Javascript
为什么推荐使用JSX开发Vue3
2020/12/28 Vue.js
python利用装饰器进行运算的实例分析
2015/08/04 Python
python黑魔法之参数传递
2016/02/12 Python
python 安装virtualenv和virtualenvwrapper的方法
2017/01/13 Python
python+requests+unittest API接口测试实例(详解)
2017/06/10 Python
python+opencv识别图片中的圆形
2020/03/25 Python
解决使用pycharm提交代码时冲突之后文件丢失找回的方法
2018/08/05 Python
django 消息框架 message使用详解
2019/07/22 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python json load json 数据后出现乱序的解决方案
2020/02/27 Python
python和php哪个容易学
2020/06/19 Python
python如何写个俄罗斯方块
2020/11/06 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
HTML5超炫酷粒子效果的进度条的实现示例
2019/08/23 HTML / CSS
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
程序员经常用到的UNIX命令
2015/04/13 面试题
2014年小学教学工作总结
2014/11/13 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
人事行政部各岗位职责说明书!
2019/07/15 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python