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

vue

1816

2024/2/20 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属性也会随之更新。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

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

最新知识库

相关标签