哪种做法更好：v-show（true / false）或replaceWith？ Vue vs jQuery

Question

我现在正在学习一些vue.js，如果我想实现以下内容，我想知道应该走哪条路：

问题是，在HTML中我可以编写<span></span>并在下面添加<textarea></textarea>和style="display: none"，所以在编辑按钮上点击，在vue.js的帮助下，我可以隐藏span并显示textarea，这样我就不必使用jQuery的replaceWith方法，而且我在那里保存了一些代码行。但是我不确定这是否适合这样做......

我还会在页面仍在加载时使用v-cloak来隐藏textarea。

Answer 1

在Vue.js中，您可以为组件的2700属性添加一个布尔值，如下所示：

data

使用此指令单击按钮时，向编辑按钮添加事件处理程序，以将data: { isEditing: false } 设置为isEditing：

true

最后在您的span中添加<a href="#" @click="isEditing = true">...</a> 指令，使其具有以下属性：

v-show

这可确保在您处于编辑模式时可以看到范围。我们想要隐藏跨度，而是在编辑时显示textarea，因此您需要在textarea上添加另一个<span v-show="!isEditing">...</span> ，以便我们在编辑时如下所示。

v-show

使用这种方法不需要jQuery，虽然我假设你是通过AJAX或传统的POST发送表单，所以我建议在这种情况下使用<textarea v-show="isEditing">...</textarea> ，以便表单输入始终在DOM。 v-show只是根据条件将v-show应用于元素，而不是像display: none那样将其从DOM中完全删除。

Answer 2

如果您已经在使用Vue，那么倾向于使用Vue而不是jQuery几乎总是更好，除非您专门为jQuery插件编写包装器。

这里的问题似乎主要是v-show呈现给DOM并隐藏呈现的元素。在Vue中，您有两个隐藏内容的基本选项。 v-show将呈现给DOM，并使用display:none隐藏它。 v-if根本不会将元素呈现给DOM。

所以在你的情况下你可能想要做这样的事情：

<span v-if="showSpan">I'm a span!</span>
<textarea v-else></textarea>

这将在showSpan为真时呈现跨度，而在textarea为真时呈现。{/ p>

有关详细说明，请查看文档here。