温馨提示×

Vue怎么实现contenteditable元素双向绑定

vue
小亿
702
2024-03-21 19:16:53
栏目: 编程语言

在Vue中实现contenteditable元素的双向绑定可以通过v-model指令实现。下面是一个简单的示例:

<template> <div> <div contenteditable="true" @input="updateContent" v-html="content"></div> </div> </template> <script> export default { data() { return { content: '这是一个contenteditable元素' }; }, methods: { updateContent(event) { this.content = event.target.innerHTML; } } }; </script> 

在上面的示例中,使用v-html指令将contenteditable元素的内容与Vue实例中的content属性绑定,同时通过@input事件监听内容的变化,并通过updateContent方法更新content属性的值,实现双向绑定。当contenteditable元素的内容发生变化时,Vue实例中的content属性也会随之更新。

0