Vue中动态获取设置了contenteditable属性的div的输入数据

---

欢迎访问我的主页：https://wk-blog.vip

1、contenteditable属性简介

contenteditable 是一个枚举属性，表示元素是否可被用户编辑。如果可以，浏览器会修改元素的组件以允许编辑。

该属性必须是下面的值之一：

• true 或空字符串，表示元素是可编辑的。
• false 表示元素不是可编辑的。
• 如果没有设置该属性的值（例如<div contenteditable><div>），则其值被视为空字符串。

如果没给出该属性或设置了无效的属性值，则其默认值继承自父元素：即，如果父元素可编辑，该子元素也可编辑。

注意，虽然该属性允许设定的值包括 true 和 false，但该属性仍是一个枚举 属性而非布尔属性。

2、Vue中动态获取div中输入的数据

对于表单输入，我们可以使用 v-mode 来进行数据的双向绑定，但是对于div来说是行不通的，不过我们可以换一种思路，即通过js中的innerHTML来获取div中输入的数据，然后通过给div绑定一个监听input事件即可实现动态获取div中输入的数据了.

3、 示例代码

<div ref="editor" v-on:input="getData" placeholder="说点什么吧" contenteditable="true"></div>

<script>
export default {
	data() {
		return {
			content:''
		}
	},
	methods:{
		getData(){
			this.content = this.$refs.editor.innerHTML;
		},
	}

}
</script>