vue div标签可输入状态下实现数据双向绑定

实现代码如下:

html 复制代码
<template>
	<div style="border: 1px solid red;" contenteditable="true" @input="updateContent">{{editableContent}}</div>
	<el-input class="" v-model="editableContent"></el-input>
</template>
javascript 复制代码
<script>
export default {
  data() {
    return {
      content: ''
    }
  },
  computed: {
    editableContent: {
      get() {
        return this.content;
      },
      set(value) {
        this.content = value;
      }
    }
  },
  methods: {
    updateContent(event) {
      this.content = event.target.innerText;
    }
  }
}
</script>

此处修改input框中的字符并不会联动到可输入div标签内容的时时更新。

相关推荐
console.log('npc')1 分钟前
vue2中子组件父组件的修改参数
开发语言·前端·javascript
Van_captain9 分钟前
rn_for_openharmony常用组件_Chip纸片
javascript·开源·harmonyos
奋斗吧程序媛20 分钟前
vue3 Study(1)
前端·javascript·vue.js
@Autowire23 分钟前
Layout-position
前端·css
QQ129584550425 分钟前
ThingsBoard - APP首页修改为手工选择组织
前端·javascript·物联网·iot
whyfail26 分钟前
前端数据存储新选择:IndexedDB与Dexie.js技术指南
前端·javascript·数据库
椰果uu26 分钟前
vue-virtual-scroller-虚拟滚动列表:渲染不定高度长列表+可控跳转
前端·javascript·typescript·vue
Kagol33 分钟前
深入浅出 TinyEditor 富文本编辑器系列之一:TinyEditor 是什么
前端·typescript·开源
空城雀37 分钟前
python精通连续剧第一集:简单计算器
服务器·前端·python
超绝大帅哥1 小时前
为什么回调函数不是一种好的异步编程方式
javascript