前言
页面渲染的和数据不一致,可以从两个方面排查。
- 看一下
vue devtools
的数据是否和预期的数据一致,如果不一致则是因为数据对象和之前不是一个对象了。 - 如果数据也一样,但顺序还不一样,就是渲染的问题。
顺序错乱
下面说一种渲染问题:
如果我们循环生成的是template
,而其中的组件都使用v-if
,这样渲染出来的顺序就和数据本身的顺序不一样。
错误的方式:
1 | <template v-for="(item, index) in eleProps.children"> |
解决的方式很简单:
后续的用v-else-if
即可。
正确的方式:
1 | <template v-for="(item, index) in eleProps.children"> |
v-for和v-if
v-for
和v-if
不建议在同一个元素上使用,一般要这样处理的时候,我们可以把v-for
放在template
上。
使用template
的时候,key
要绑定在子元素上。
并且如果有多个子元素,不要都用v-if
,会导致渲染顺序问题。
下面是使用 <template>
元素包裹 v-if 和 v-for 的示例代码:
1 | <template v-for="(item,index) in items"> |
通过使用 <template>
元素,可以解决 v-if
和 v-for
同时使用时的渲染顺序问题。
v-for 在 <template>
元素上进行迭代,而每次迭代时<div>
元素根据条件进行渲染。
这种方式能够保持代码的可读性和维护性,并且不会引起意外的结果。
同时,还可以利用 <template>
元素的特性,避免不必要的 DOM 元素渲染,提升性能。