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标签内容的时时更新。

相关推荐
qq_316837757 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
天天向上10247 小时前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html
光影少年7 小时前
React Native 第三章
javascript·react native·react.js
KoProject7 小时前
发布30款App之后,我总结了这套GLM-4.6全自动化开发流
前端·后端·github
一川_7 小时前
虚拟滚动的幽灵:从搜索失准到丝滑体验的救赎之旅
javascript
前端踩bug工程师7 小时前
flutter项目
前端
云枫晖7 小时前
Webpack系列-SourceMap
前端·webpack
qq_420362037 小时前
PDF导出服务
前端·pdf·状态模式·node·puppeteer
该用户已不存在7 小时前
构建现代应用的9个Python GUI库
前端·后端·python