哪種做法更好：v-show（true/false）還是replaceWith？ Vue公司VS jQuery的

我學習一些vue.js，但是，如果，例如，我想實現以下我不知道我應該往哪個方向走：哪種做法更好：v-show（true/false）還是replaceWith？ Vue公司VS jQuery的

的問題是，在HTML中，我可以編寫<span></span>並在下面添加<textarea></textarea>和style="display: none"，所以在編輯按鈕點擊時，藉助vue.js的一些幫助，我可以隱藏span和show textarea，這樣我就不必使用jQuery的replaceWith方法，再加上我會保存一些代碼行。但我不知道這是否是適當的方式來做到這一點...

我還會使用v-斗篷隱藏textarea，而頁面仍在加載。

來源

2017-04-19 Jake Pery

在Vue.js你一個布爾添加到您的組件的data屬性，像這樣：

data: { 
    isEditing: false 
}

添加事件處理程序到你的編輯按鈕來設置isEditing到true按鈕被點擊此指令時：

<a href="#" @click="isEditing = true">...</a>

最後一個v-show指令添加到您的跨度，以便它具有以下屬性：

<span v-show="!isEditing">...</span>

這確保了當您不處於編輯模式時可以看到範圍。我們希望隱藏該跨度，而在編輯時顯示textarea，因此當我們編輯如下時，您需要在textarea上添加另一個v-show。

<textarea v-show="isEditing">...</textarea>

使用這種方法不需要jQuery的，但我假設你要麼通過AJAX或傳統的POST發送的形式，所以我建議在這種情況下使用v-show，使表單輸入總是內DOM。 v-show簡單地將display: none應用於基於條件的元素，而不是完全從DOM中刪除它，因爲v-if會。

來源

2017-04-19 16:30:32

是的，是的，你說得對，我其實已經實現了，但是我的問題是這是否是一個正確的方法。你可以在檢查頁面時看到兩個html元素，看起來很髒，不是嗎？我想知道哪種做法更好：使用vue.js或使用jQuery的replaceWith方法。再一次，對我來說，使用vue.js，整個代碼看起來更清晰，更短。 –

@JakePery您可以使用'v-if'而不是'v-show'。 'v-if'不會呈現DOM。 – Bert

@JakePery Vue.js在兩者中更具可維護性，特別是如果它是一個相當大的項目。如果將它重構爲一個組件，它還會促進代碼的重用。如果您查看源代碼，我不會擔心這兩個HTML元素，但如果您擔心這一點，請務必使用'v-if'來代替'v-show'。我在'v-show'示例中的主要動機是萬一您需要表單元素在DOM中呈現表單提交。 –

如果您已經使用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時，它不是。

有關進一步說明，可以查閱文檔here。

來源

2017-04-19 16:53:07 Bert

謝謝，那是我最關心的問題。不知道v-if是不會渲染DOM的。我更喜歡vue.js的方式，我會堅持。 –

哦，不得不給丹尼爾Waghorn接受答案，他提到v - 如果在最後一段，我錯過了。抱歉。但你的答案仍然有用！ –

@JakePery完美無缺:)我只是試圖澄清我認爲是您主要關注的問題之一。 – Bert

哪種做法更好：v-show（true/false）還是replaceWith？ Vue公司VS jQuery的

回答

相關問題