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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
JavaScript isArray()函数判断对象类型的种种方法
Oct 11 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
解决Extjs4中form表单提交后无法进入success函数问题
Nov 26 Javascript
JS批量操作CSS属性详细解析
Dec 16 Javascript
jQuery实现判断滚动条到底部
Jun 23 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
使用JS模拟锚点跳转的实例
Feb 01 Javascript
vue数据响应式原理知识点总结
Feb 16 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 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实现的美国50个州选择列表实例
2015/04/20 PHP
简单谈谈favicon
2015/06/10 PHP
curl和libcurl的区别简介
2015/07/01 PHP
Laravel中使用Queue的最基本操作教程
2017/12/27 PHP
PHP使用PDO抽象层获取查询结果的方法示例
2018/05/10 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
js整数字符串转换为金额类型数据(示例代码)
2013/12/26 Javascript
jquery获取元素索引值index()示例
2014/02/13 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
Angular2监听页面大小变化的解决方法
2017/10/09 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
Python 执行字符串表达式函数(eval exec execfile)
2014/08/11 Python
Python的Tornado框架的异步任务与AsyncHTTPClient
2016/06/27 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
使用python 3实现发送邮件功能
2018/06/15 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
Blancsom美国/加拿大:服装和生活用品供应商
2018/07/27 全球购物
奥地利票务门户网站:oeticket.com
2019/12/31 全球购物
英国独特家具和家庭用品购物网站:Cuckooland
2020/08/30 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
护士思想汇报
2014/01/12 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
书法大赛策划方案
2014/06/04 职场文书
群众路线领导对照材料
2014/08/23 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
2014年护士长工作总结
2014/11/11 职场文书
离婚答辩状范文
2015/05/22 职场文书
动画《朋友游戏》公开佐藤友生绘制的开播纪念绘
2022/04/06 日漫