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

更新时间：2017年02月08日 14:50:18 投稿：daisy

这篇文章主要给大家介绍了利用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），并将数据返回给父组件。

代码如下：

<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 传送门

总结

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

您可能感兴趣的文章:

15 分钟掌握vue-next响应式原理
这篇文章主要介绍了15 分钟掌握vue-next响应式原理,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
详解vue2 $watch要注意的问题
本篇文章主要介绍了详解vue2 $watch要注意的问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Vue组件之间的通信方式(推荐!)
组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互进行直接的引用,所以组件间的相互通信是非常重要的,这篇文章主要给大家介绍了关于Vue组件之间的通信方式,需要的朋友可以参考下
2022-06-06
Vue实现录制屏幕并本地保存功能
这篇文章主要介绍了Vue实现录制屏幕功能并本地保存,这里用的是用的是HBuilder X开发，结合示例代码给大家介绍的非常详细，需要的朋友可以参考下
2022-04-04
在vue2 中使用 tailwindcss的方法亲测可用
这篇文章主要介绍了在vue2 中使用 tailwindcss的方法亲测可用,本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
axios请求二次封装之避免重复发送请求
在做vue中大型项目的时候,官方推荐使用axios,但是原生的axios可能对项目的适配不友好,所以在工程开始的来封装一下axios,下面这篇文章主要给大家介绍了关于axios请求二次封装之避免重复发送请求的相关资料,需要的朋友可以参考下
2022-10-10
Vue3+echarts5踩坑以及resize方法报错的解决
这篇文章主要介绍了Vue3+echarts5踩坑以及resize方法报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
VueJs使用Amaze ui调整列表和内容页面
这篇文章主要介绍了VueJs 填坑日记之使用Amaze ui调整列表和内容页面,需要的朋友可以参考下
2017-11-11
vue移动端实现左滑编辑与删除的全过程
vue.js是现在流行的js框架之一,vue 是一套用于构建用户界面的渐进式javascript框架，这篇文章主要给大家介绍了关于vue移动端实现左滑编辑与删除的相关资料,需要的朋友可以参考下
2021-05-05
vue项目中使用this.$confirm解析
这篇文章主要介绍了vue项目中使用this.$confirm方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具