Vue学习之v-if和v-for指令,50w字+的前端技术类校招面试题汇总

29 阅读3分钟

读者福利

========

由于篇幅过长,就不展示所有面试题了,想要完整面试题目的朋友(另有小编自己整理的2024大厂高频面试题及答案附赠)

开源分享:docs.qq.com/doc/DSmRnRG…

{{list[2]}}

{{list[3]}}

{{list[4]}}

在这里插入图片描述

循环使用

简单的使用循环

在这里插入图片描述

在这里插入图片描述

获取循环下标

在这里插入图片描述

在这里插入图片描述

2.对象数组


集合中的元素是对象

Document

Id:{{ user.id }} --- 名字:{{ user.name }} --- 索引:{{i}}

在这里插入图片描述

数组中的元素是自定义的对象的时候直接通过"."存取器来获取元素。

3.循环对象


注意:在遍历对象身上的键值对的时候, 除了有val,key ,在第三个位置还有 一个 索引 。

Document

值是: {{ val }} --- 键是: {{key}} -- 索引: {{i}}

在这里插入图片描述

4.迭代数字


Document

这是第 {{ i }} 次循环

在这里插入图片描述

5.循环中key属性的使用


注意:2.2.0+ 的版本里,当在组件中使用 v-for 时,key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略。如果数据项的顺序被改变,Vue将不是移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。

有问题的情况

Document

Id:

Name:

<input type="button" value="添加" @click="add">

{{item.id}} --- {{item.name}}

学习分享,共勉

题外话,毕竟我工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】