vue 如何动态 创建或删除dom元素

Question

如图所见，点击按钮，如何在原本的这一栏下面动态添加dom元素（添加的dom元素要和上面红色框标记的一样），还有点击取消按钮，如何删除添加的dom元素；

Answer 1

直接上图，https://codesandbox.io/s/k37l... 这个链接是实现效果，可以看一下

Answer 2

数据驱动展示:

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

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

Answer 3

用Vue正常情况下避免直接操作dom了，数据驱动视图。

Answer 4

vue是数据驱动的，不直接操作dom元素，你要把dom元素想像成一个对象，然后对这个对象进行增加删除操作，vue会自动更新视图

Answer 5

v-if v-show 了解下
https://cn.vuejs.org/v2/guide...

Answer 6

主要是你写代码用vue的时候的思路问题
vue主要就是数据驱动视图
你要想着改变数据 再由数据改变视图！