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

相关推荐
__sjfzllv___1 分钟前
在职前端Leader学习/转行 AI Agent -DAY37
前端
用户2181697049305 分钟前
Flutter (二十二) GlobalKey
前端
用户2181697049307 分钟前
Flutter (二十一) 下拉刷新,加载更多
前端
breeze jiang1 小时前
Next.js 16 App Router 实战:从 About、Blog 动态路由到全局 404
开发语言·javascript·ecmascript
小蒜学长1 小时前
vue旅游攻略网站(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端·旅游
IT_陈寒1 小时前
Python装饰器把我坑惨了,原来这样用才不掉链子
前端·人工智能·后端
程序员爱钓鱼2 小时前
Rust Associated Type关联类型详解:为Trait定义内部类型
前端·后端·rust
zh_xuan2 小时前
个人主页左侧菜单支持分组,以及菜单显示和隐藏
前端·javascript·css
Ming_studying3 小时前
HTML + CSS + JavaScript实现可视化JSON工具:格式化、折叠、搜索与错误定位
javascript·css·html·json·数据可视化·web工具
Emily156853598706 小时前
Emerson 1C31129G03 Analog Input Module
java·开发语言·前端·plc·emerson·1c31129g03·input module