How vue dynamically creates or deletes dom elements

as shown in the figure, click the button to dynamically add the dom element below the original column (the dom element to be added is the same as the one marked in the red box above), and click the cancel button to delete the added dom element.

Nov.03,2021

directly above image, https://codesandbox.io/s/k37l. this link is the implementation effect, you can take a look at
clipboard.png


data-driven presentation:

template:
<dom v-for="(item,k) in lists">{{item}}</dom>

script:
methods:{
   add () {
     this.lists.push({})
   },
   delete () {
     this.lists.pop({})
   },
}

use Vue normally to avoid direct manipulation of dom, data-driven view.


vue is data-driven. Instead of directly manipulating the dom element, you need to think of the dom element as an object, and then add and delete the object. Vue will automatically update the view


v-if v-show learn about
ide/conditional.html" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.


is mainly your thinking problem when writing code using vue
vue is mainly data-driven view
you want to change the data and then change the view!

Menu