vue3(列表渲染)_vue3 setup vmodel如何让后台数据渲染到界面表格上

列表渲染

v-for

可以用v-for指令基于一个数组来渲染一个列表。V-for指令需要使用item initems形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。（即items相当于数组，item相当于数组中的元素）。

 

 

 

遇到报错：Elements in iteration expect to have ‘v-bind:key‘ directives

解决方法：1. 我们在使用v-for的时候，在v-for 后添加 v-bind:key="item"（可简写省略v-bind，item替换为数组中的元素名）

 

2. 更改vetur配置 ：vscode文件（file）->首选项（preferences）->设置(settings)->搜索vetur.validation.Template，将这一项去掉该为false就可以了

(本想偷懒使用方法二，不知道什么原因更改了并没有解决问题，使用了方法一后完美解决)

维护状态

当vue正在更新使用v-for渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，vue将不会移动DOM元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。

为了给vue一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一的key attribute(关键属性)。

 

v-for里使用范围值

v-for可以直接接受一个整数值。在这种用例中，会将该模板基于 1...n 的取值范围重复多次。

 

显示结果：

 

v-for与v-if

不推荐同时使用v-if和v-for。因为这样二者的优先级不明显。

当它们同时存在于一个节点上，v-if比v-for的优先级更高。这意味着v-if的条件将无法访问到v-for作用域内定义的变量别名：

 

会出现报错

 

在外新包装一层 <template> 再在其上使用 v-for 可以解决这个问题 (这也更加明显易读)：

 

注：需要在原本的template里加，一个文件里只能有一个template。

如有问题或错误，欢迎讨论与批评指正！i