如何仅使用 Vue.js 来实现 DOM 操作，例如在段落元素中包装文本？

Question

我有一个 Vue 组件，它有一个 contenteditable div 允许用户输入消息。当用户第一次尝试创建消息时，我使用 jQuery 将文本包装在 <p> 标记中。我无法理解如何单独使用 Vue.js 来实现...

Vue.js 组件

<template>
   <div id="Message" contenteditable="true" @focus="formatMessage" @keydown="formatMessage" @keyup="formatMessage" @keypress="formatMessage">

   </div>
</template>

<script>
  import $ from 'jquery'

  formatMessage: function(event) {
    if ($("#Message > p").length === 0) {            // if no <p> element when user interacts with div
      $("#Message").contents().eq(0).wrap("<p />");  // then wrap a <p> tag around the first child content
  }

}

是否可以仅使用 Vue.js 来执行此操作，这样我就不必加载 jQuery 库来进行简单的 DOM 操作（这可能会导致 Vue 的虚拟 DOM 与 jQuery 的更改不同步）？

formatMessage()之前：

<div id="Message" contenteditable="true">
I started typing here  
</div>

formatMessage()之后：

<div id="Message" contenteditable="true">
 <p>I started typing here</p>
</div>

尝试使用 Vue 的虚拟 DOM 是否可能/更好？我可以以某种方式使用createElement 创建一个新的p 标签，然后用用户输入的内容更新其内容吗？也许这不是 Virtual DOM 的工作方式，我不确定。

Answer 1

如果你想实现类似的东西，你可以使用v-if 并稍微复制代码

<template>
   <div v-if="shouldWrap === false" contenteditable="true" @focus="formatMessage" @keydown="formatMessage" @keyup="formatMessage" @keypress="formatMessage">

   </div>
   <p v-else>
      <div contenteditable="true" @focus="formatMessage" @keydown="formatMessage" @keyup="formatMessage" @keypress="formatMessage">
     </div>
   </p>
</template>
<script>
export default {
 data () {
   return {
    shouldWrap: false
   }
 },
 methods: {
   formatMessage() {
    this.shouldWrap = true
   }
 }
}
</script>

但可能尝试匹配 p 的样式也应该可以。

Answer 2

不要在 VUE 中使用类似 JQuery 的 DOM 操作，VUE 是数据驱动框架，你需要在组件中存储一些数据来触发布局，例如

<template>
   <div contenteditable="true" @focus="formatMessage" @keydown="formatMessage" @keyup="formatMessage" @keypress="formatMessage">
     <!-- wrap 'p' tag, if 'shouldWrap'-->
     <p v-if="shouldWrap">{{content}}</p>
     <!-- without wrap-->
     <template v-else>{{content}}</template>
   </div>

</template>
<script>
export default {
 data () {
   return {
    shouldWrap: false,
    content:'' // text, you want to display inside div
   }
 },
 methods: {
   formatMessage() {
    this.shouldWrap = true
   }
 }
}
</script>