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 吧。
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。
相关推荐
-
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱. 解决方案一 然后开始参考网上和github上的方案等等,发现很多解决方案是这样的 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch data副本,emit一个函数 通知到组件外 这里以最常见的 modal为例子:
-
vue.js指令v-model使用方法
vue.js的一大功能便是实现数据的双向绑定,本文就表单处理时运用v-model指令实现双向绑定做一个介绍: v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据.这是通过设置属性访问器实现的.例如: var data = { name: "erik", g
-
vue 2.0组件与v-model详解
前言 大家可能乍一看这个标题,可能会有疑问:v-model和组件也能扯到一起?在打算写这篇文章的时候,也是这么想的.咱们按简历的那一套STAR法则来梳理一下这篇文章: 情景[Situation]: 编写通用的输入组件时,子组件要绑定到父组件的某个变量上dataA,当父组件要拿到自组件的值时不能通过this.$children.xxx取值然后付给dataA, 而是父组件可以直接this.dataA就可以取到当前子组件最新值. 任务[Task]: 实现在父组件直接this.dataA就可以取到当前子
-
浅谈 Vue v-model指令的实现原理
vue的v-model是一个十分强大的指令,它可以自动让原生表单组件的值自动和你选择的值绑定, 我们来看一下它的效果: 输入框的值和一个数据是绑定的,输入框的值变化,和他绑定的值也会发生变化 我们可以参照官方文档的例子 http://cn.vuejs.org/v2/guide/forms.html#文本 我们在手动输入 hello的过程中 下面和他绑定的p标签的值也是实时变化的 如此神奇的效果是如何实现的呢? 还是参照官方文档 http://cn.vuejs.org/v2/guide/co
-
vue.js指令v-model实现方法
V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个语法糖. 实际是通过下面的代码来实现的: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html> <html lang="en">
-
vue v-model表单控件绑定详解
v-model 指令在表单控件元素上创建双向数据绑定,下面一一进行示例解释. 1.v-model 双向绑定文本 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="vue.js&quo
-
利用Vue v-model实现一个自定义的表单组件
功能描述: 通过点击按钮,可以增减购物数量 组件名称是 CouterBtn 最终效果如下 我们使用 vue-cli搭建基本的开发环境,这也是最快的进行 .vue组件开发的方式 对于入口组件 App.vue (可以暂时忽略其他细节,我们的重点是如何写组件) App.vue <template> <div id="app"> <h4>这是一个利用 v-model实现的自定义的表单组件</h4> <h6>CouterBtn组件的值
-
Vue常用指令V-model用法
v-model这个指令只能用在<input>, <select>,<textarea>这些表单元素上,所谓双向绑定,指的就是我们在js中的vue实例中的data与其渲染的dom元素上的内容保持一致,两者无论谁被改变,另一方也会相应的更新为相同的数据. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title&
-
Vue 进阶教程之v-model详解
Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2 v-model改进的地方,然后穿插的再说点 Vue 的小知识. 在 Vue 中,有许多方法和 Angular 相似,这主要是因为 Angular 是 Vue 早期开发的灵感来源.然而,Augular 中存在许多问题,在 Vue 中已经得到解决. v-model 用在 input 元素上时 v-model虽然很像使用了双向数据绑定的 Angular 的 ng-model,但
-
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable="true" 的 div ,而在这个 div 上是使用 v-model 是没有效果的.那么问题就来了,输入是非常需要双向绑定的,这里的双向数据绑定该如何实现? 解决思路一:自定义指令 当然,说在这一段的前面,这种解决方式在 vue2 中是不行的,为什么这么说,因为现在去搜索这个问题绝大多数的搜索结果是这个,所以放在前面. 实现的原理以及
-
Vue中div contenteditable 的光标定位方法
在Vue做项目时,做了一个div[contenteditable=true]的组件作为文本输入框 在非手动输入值后,光标会丢失,经测试以下这段代码可用,直接将光标定位到最后 function keepLastIndex(obj) { console.log(obj) console.log(window.getSelection) console.log(document.selection) if (window.getSelection) { //ie11 10 9 ff safari ob
-
electron+vue实现div contenteditable截图功能
最近在学习基于electron + electron-vue开发聊天客户端项目时,需要用到编辑器插入表情功能.一般通过input或textarea也能实现,通过插入[笑脸].(:12 这些标签,展示的时候解析标签就行. 如下图效果: 在网上找到的jq插件实现在textarea光标处插入表情符标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t
-
JS+DIV+CSS实现仿表单下拉列表效果
本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果.分享给大家供大家参考.具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下: <!DOCTYPE
-
JS+DIV实现鼠标划过切换层效果的方法
本文实例讲述了JS+DIV实现鼠标划过切换层效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>DIV层切换</title> <script language="JavaScript" type="text/javascript"> /********************************************* 功能: 通用DIV切换函数 参数: d
-
js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了,本效果实现了两种效果,Div切换,TAB切换,和文字滚动,鼠标移上后文字停止滚动,两种功能可任意剥离出来,这不影响代码使用. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-txt-pic-scroll-cha-style-codes
-
JS+DIV+CSS实现的经典标签切换效果代码
本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码.分享给大家供大家参考.具体如下: 这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-bq-cha-tab-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
-
js点击弹出div层实现可拖曳的弹窗效果
弹出层.弹窗效果+拖曳功能 *{ margin:0px; padding:0px;} body{ font-size:12px; font:Arial, Helvetica, sans-serif; margin:25PX 0PX; background:#eee;} .botton{ color:#F00; cursor:pointer;} .mybody{width:600px; margin:0 auto; height:1500px; border:1px solid #ccc; pad
-
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些. 先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件. 效果预览 关键代码及分析如下: <template> // 每一个 tab 绑定了一个点击事件,传入的参数对应着
-
JS+DIV实现鼠标划过切换层效果的实例代码
<style>/*栏目切换样式开始*/.none {display: none;}.block {display: block;}/*头部样式*/.s_c {width:800px;text-align: center;}.s_c ul{clear:both;margin:0;}.s_c li{list-style:none;float:left;position: relative;width: 70px;}/**/.c_0 {background-color: #CCCCCC;} /*隐藏
随机推荐
- JDBC探索之SQLException解析
- Ajax全局加载框(Loading效果)的配置
- CODEPAGE 列表与asp应用例子第1/2页
- 网页前端登录js按Enter回车键实现登陆的两种方法
- Jquery的hide及toggle方法让超链接慢慢消失
- 作为PHP程序员应该了解MongoDB的五件事
- php的crc32函数使用时需要注意的问题(不然就是坑)
- javascript hashtable 修正版 下载
- Select count(*)、Count(1)和Count(列)的区别及执行方式
- 自定义jquery模态窗口插件无法在顶层窗口显示问题
- Array对象方法参考
- 提示无法停止‘通用卷’的解决方法
- 详解如何在 CentOS7.0 上搭建DNS 服务器
- C# WINFORM 强制让窗体获得焦点的方法代码
- 新闻分类录入、显示系统
- 基于JavaScript实现报警器提示音效果
- JavaScript伪数组用法实例分析
- vue+element-ui+ajax实现一个表格的实例
- Python实现输出某区间范围内全部素数的方法
- JDBC Oracle执行executeUpdate卡死问题的解决方案