?

實現效果如下：


通過?v-if?的?boolean值來動態變化是否顯示文本框還是?button?按鈕。通過?v-model?雙向綁定來實現文本框內容的監聽。

由于每一行需要設置文本框的顯示與隱藏，而且數據是共享的。我們需要通過?scope來獲取每一行的值來進行綁定，不然的話，就會導致某個文本框顯示了，其它文本框也跟著顯示，并且數據是共用的，都會同步變化。而設置?scope后，我們就能實現對一行數據進行更新渲染了。

為了實現當我們點擊按鈕后，讓本文看自動獲取焦點。

通過?this.$refs.saveTagInput.$refs.input.focus()?來獲取?input?的?dom?對象，接著調用?focus函數來獲取焦點。

$nextTick?作用是當頁面元素被重新渲染之后才會執行回調函數中的代碼。如果不這樣做的話，我們直接通過點擊按鈕的形式，將該行的?inputVisible?設置為了?true，那么此時直接調用?this.$refs.saveTagInput.$refs.input.focus()?是沒辦法獲取焦點的，此時就會報錯。因為我們的?dom節點還沒有進行渲染，而先調用?$nextTick?就是為了等待?dom節點渲染之后，我們再獲取?input，然后再調用?focus?函數來獲取焦點。

總結

以上是生活随笔為你收集整理的前端学习（2692）：重读vue电商网站13之使用动态编辑标签的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。