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

相关推荐
Front思4 小时前
AI前端工程师需要具备能力+
前端·人工智能·ai
ZC跨境爬虫6 小时前
跟着 MDN 学CSS day_29:(掌握文本与字体样式的核心艺术)
前端·css·ui·html·tensorflow
李子琪。7 小时前
网络空间安全深度实战:CSRF 漏洞原理剖析与基于 Token 的纵深防御体系构建(全栈实验报告)
前端·安全·csrf
冰暮流星7 小时前
javascript之history对象介绍
前端·笔记
IT_陈寒7 小时前
Vite热更新失灵?你可能漏了这个配置
前端·人工智能·后端
丷丩7 小时前
MapLibre GL JS第19课:实时更新要素
前端·javascript·gis·map·mapbox·maplibre gl js
Mr.Daozhi7 小时前
RAG 进阶实战:跑通 Demo 后我连续翻了 6 次车,逐一修复才真正可用(含 Gradio Web 版)
前端·数据库·langchain·大模型·gradio·rag·科研工具
哆来A梦没有口袋7 小时前
干货精讲 | 初级CSS面试高频考题
前端·css·面试
掘金018 小时前
EmbedPDF Vue 版 完整正文文档 全网首发
前端
OpenTiny社区8 小时前
操作ArkTS页面跳转及路由相关心得
前端·typescript·web·opentiny