v-for指令所在的元素和Vue实例挂载的元素是同一个元素时出现的问题

初学vue2，在这过程中练习v-for指令时敲了如下图所示的这段代码，发现浏览器并没有显示结果。

又再去看官方文档看人家示例是怎么写的，如下


看了半天发现我和它的区别在于，它的v-for指令使用在了vue实例挂载元素（#app-4）的子元素（li）上，而我v-for指令所在的元素和Vue实例挂载的元素是同一个元素。查阅资料发现Vue的指令，v-for指令会在这个元素上创建多个新的元素（因为是循环指令），而Vue实例又试图管理这个元素及其内容。这就导致了冲突，Vue实例没法去管理一个已经被v-for指令修改过的元素。

所以解决方法就是v-for指令使用在vue实例挂载元素的子元素下，避免同一个元素有冲突，修改代码后如下图，浏览器可以正常显示。