Vue v-if 使用的问题

Question

不懂这个警告是什么意思，但是好像不影响运行

Answer 1

waring提示的理由是 v-if 应该被移动到外层的element中。
所以这里可以这样改写

<template v-if="datas[index]">
    <table-cell v-for="n in 8" :key="n" :carDatas="datas[index][n-1]"></table-cell>
</template>

v-if 用来判断是否create Dom，所以table-cell 就可以直接在template层决定了dom是否生成，而不是在加载组件table-cell的同时判断v-if。

我是这样理解的

Answer 2

v-if 是将元素在dom树中删除 建议使用v-show 原理改变display为none 如果需要删除元素在使用v-if

Answer 3

你v-if的条件是status[index], 和当前v-for的内容n无关, 而和上层的v-for中index有关. 所以当status[index]不存在的时候会产生一个空的ul. 建议把v-if写到ul上去.