溫馨提示×

Vue怎么實(shí)現(xiàn)contenteditable元素雙向綁定

vue
小億
488
2024-03-21 19:16:53
欄目: 編程語言

在Vue中實(shí)現(xiàn)contenteditable元素的雙向綁定可以通過v-model指令實(shí)現(xiàn)。下面是一個(gè)簡單的示例：

<template>
  <div>
    <div contenteditable="true" @input="updateContent" v-html="content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '這是一個(gè)contenteditable元素'
    };
  },
  methods: {
    updateContent(event) {
      this.content = event.target.innerHTML;
    }
  }
};
</script>

在上面的示例中，使用v-html指令將contenteditable元素的內(nèi)容與Vue實(shí)例中的content屬性綁定，同時(shí)通過@input事件監(jiān)聽內(nèi)容的變化，并通過updateContent方法更新content屬性的值，實(shí)現(xiàn)雙向綁定。當(dāng)contenteditable元素的內(nèi)容發(fā)生變化時(shí)，Vue實(shí)例中的content屬性也會(huì)隨之更新。

0 踩