Vue进阶（幺贰叁）：v-for 实现一行展示 n 个元素_vue每行显示3个元素(2)

于 2024-05-16 15:21:00 发布
阅读量501 收藏 3
点赞数 4
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84619530/article/details/138962887
版权
专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容

文章目录

一、需求背景

在开发前端项目过程中，遇到结果列表操作栏位需要每2个按钮元素为一行展示需求。

二、需求分析

可通过将返回值封装为二维数组，或者根据数组下标进行换行操作。

三、解决方案

经过实践，发现将返回值数组封装为二维数组，然后前端通过el-row,el-col标签封装实现。实现代码如下：

<el-row v-for="(btnArr, index) in oprBtn" :key="index">
	<el-col v-for="(btn, index) in btnArr" :key=''btn.laberid">
		<el-button type="text" @click="btnClick(btn.laberid)"></el-button>
	</el-col>
</el-row>

JavaScript

  • js的基本类型有哪些？引用类型有哪些？null和undefined的区别。

  • 如何判断一个变量是Array类型？如何判断一个变量是Number类型？（都不止一种）

  • Object是引用类型嘛？引用类型和基本类型有什么区别？哪个是存在堆哪一个是存在栈上面的？

  • JS常见的dom操作api

  • 解释一下事件冒泡和事件捕获

  • 事件委托（手写例子），事件冒泡和捕获，如何阻止冒泡？如何组织默认事件？

  • 对闭包的理解？什么时候构成闭包？闭包的实现方法？闭包的优缺点？

  • this有哪些使用场景？跟C,Java中的this有什么区别？如何改变this的值？

  • call，apply，bind

  • 显示原型和隐式原型，手绘原型链，原型链是什么？为什么要有原型链

  • 创建对象的多种方式

  • 实现继承的多种方式和优缺点

  • new 一个对象具体做了什么

  • 手写Ajax，XMLHttpRequest

  • 变量提升

  • 举例说明一个匿名函数的典型用例

  • 指出JS的宿主对象和原生对象的区别，为什么扩展JS内置对象不是好的做法？有哪些内置对象和内置函数？

  • attribute和property的区别

  • document load和document DOMContentLoaded两个事件的区别

  • JS代码调试

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

2401_84619530
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 进阶教程之v-model详解
08-30
v-model 是 Vue 中的一个指令，主要用来实现表单控件的双向数据绑定。在 Vue 中，v-model 指令可以用在 input 元素上，也可以用在组件上，本文将详细介绍 v-model 的使用和原理。 v-model 的基本使用 v-model 指令...
wl-micro-frontends：微型前端实用项目教程。基于vue3.0＆qiankun2.0进阶版：https：github.comwl-uiwl-mfe
01-31
wl-micro-frontends [wl-qiankun] 本项目采用vue + qiankun实践微前端落地。同时qiankun是一个开放式微...鉴于qiankun文档只有很少少数行，这里做一个尝试详细的实战示例描述： 微前端主应用与子应用如何构建 主应用
VUE动态渲染，双层for循环
m0_60349254的博客
01-29 637
VUE前端动态渲染，双层for循环
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
10-18
主要介绍了关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性),需要的朋友可以参考下
Vue进阶（幺贰叁）：v-for 实现一行展示 n 个元素
IT全栈 华强工作室
06-03 8971
Vue进阶（幺贰叁）：v-for实现一行展示n个元素 需求背景 在开发前端项目过程中，遇到结果列表操作栏位需要每2个按钮元素为一行展示需求。 需求分析 可通过将返回值封装为二维数组，或者根据数组下标进行换行操作。 解决方案 经过实践，发现将返回值数组封装为二维数组，然后前端通过el-row,el-col标签封装实现。实现代码如下： <el-row v-for="(btnArr, index) in oprBtn" :key="index"> <el-col v-for="(btn, in
vue v-for 标签循环 ，仅显示3条
蓝胖子的博客
12-01 4823
vue中v-for渲染，实现显示3条，数据arr.slice(0,3)，即可取出arr数据的前三条 <div class="subCode" v-for="(item, index) in scope.row.barcode.subCodeList.slice( 0,3)" :key="index"> <div>{{ item.barcode }}</div> <div>{{ item.amount }}</div>
【Vue 页面+flex布局 】一行内显示4个元素，超出4个换行，每一行的最后一个去掉marginRight属性
蓝胖子的博客
03-26 1598
【Vue 页面+flex布局 】一行内显示4个元素，超出4个换行，每一行的最后一个去掉marginRight属性
vue for循环 一行放5个数据 外层使用flex布局
Abenazhan的博客
02-05 4065
html： <template v-for="(item, i) in aa" > <div style="width:100%;display: flex;justify-content: flex-start;align-items: center;" v-if="i%5==0" > <div style="width: 19%;display: flex;justify-content: flex-start;align-items: base
毕业设计&课设-一个前后端分离的简易进销存后台管理系统，基于SpringBoot和vue元素管理员实现，具备常见的后台.zip
06-09
3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，...
毕业设计&课设-一个基于SpringBoot+Vue3实现的前后端分离的在线报名系统，可用于用户的信息收集。 前端利用.zip
06-16
3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，...
毕业设计&课设-毕业设计&课设-一个基于SpringBoot+Vue3的后端管理系统一个基于SpringBoot+Vu.zip
最新发布
06-16
3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，...
vue——v-for动态循环的div，一排3个，padding-right为120，让最后一个padding-right设为0
HoShining日志
11-07 2792
处理前： （主要看ABC三部分，现在要做的是去掉C部分的padding值） 处理后： 开始处理： 定义div <div class="introduction_inner-g-item " v-for="(item,index) in useType" :key="index" :class="(index + 1) % useType.length == 0 ?'noright':'margin-right-120'"> &lt
vue中的for循环如何循环到到一定次数换行
qq_35056468的博客
08-12 3999
本文只为分享思路，不喜勿喷，谢谢！ 简单讲一下 今天遇到遇到一个需求，给地图坐标点动态增加图例，个数未知。不超出宽度的居中显示，超出宽度要换行。 本来想偷懒 网上找一些， 但是翻来翻去都不是我想要的， 于是我自己写了一个，主要思路是通过动态绑定父级容器的 class来实现的 html部分 <div :class="[list.length>5?'normal-container_warp':'normal-container']"> <div class="legend" v-f
v-for应用到卡片，实现卡片列表循环
qq_42252855的博客
03-10 3025
指的是当前循环的下标，或者第几次循环，循环的数据包含在item内，由于图片储存的是整个地址，所以使用image-preview标签进行回显。使用elment ui中的el-col组件进行卡片循环，宽度为4每行能放6个卡片，el-row默认格栅是24。根据getlist方法获取后端数据，返回数据存于row，将row的值付给tsxxblist。v-for根据所查数据的长度进行循环，pagination标签是分页部分。
element v-for循环列表的表单校验（动态绑定的数据)
小猪的博客
12-21 4030
1、一层循环时嵌套： html： <el-form :model="addform" ref="addform" :rules="rules"> <el-form-item label="资源" required label-width="120px"> <el-row v-for="(item,i) in addform.resourceList" :key="i"> <el-col :span="10">
vue-如何将块级元素放在同一行？
qq_65606189的博客
12-13 1540
为了将它们放在一块，我们可以将这三个块放在一个div盒子中并定义一个类，然后在style模块中实现一行显示。如图：此时的“添加”按钮和“搜索”按钮已经搜索框在三行显示。
v-for遍历每行展示两个
weixin_38673922的博客
08-18 2266
<van-row type="flex" justify="space-around" class="info_0" v-for="(item,index) in listTemp" :key="index"> <van-col span="6" class="info_4" v-for="(cell,i) in item" :key="i" > <span v-if="cell.s_CurrencyName">待缴官费金额({{cell.s_Curr...
v-for循环数组，将id传到子组件中
qq_44206870的博客
10-07 342
v-for循环数组，将id传到子组件中
v-for警告解决方法
zhongjunhaoz的博客
11-19 239
<el-row v-for="item in servCostInfos"> //这样会警告 <el-row v-for="(item,index) in servCostInfos" :key="index"> //这样就不会
vue中v-for循环一行三列列表
09-12
### 回答1： 你可以在Vue中使用v-for指令来循环生成一行三列的列表。具体步骤如下： 1. 在Vue的data中定义一个数组，包含要显示的数据。 2. 在HTML模板中使用v-for指令，循环遍历数组，并使用CSS样式控制每个数据项的位置。 例如，以下是一个简单的代码示例： ```html <template> <div class="container"> <div class="row"> <div class="col-md-4" v-for="(item, index) in items" :key="index"> <div class="card"> <div class="card-body"> <h5 class="card-title">{{ item.title }}</h5> <p class="card-text">{{ item.description }}</p> </div> </div> </div> </div> </div> </template> <script> export default { data() { return { items: [ { title: 'Item 1', description: 'This is the first item.' }, { title: 'Item 2', description: 'This is the second item.' }, { title: 'Item 3', description: 'This is the third item.' }, { title: 'Item 4', description: 'This is the fourth item.' }, { title: 'Item 5', description: 'This is the fifth item.' }, { title: 'Item 6', description: 'This is the sixth item.' } ] } } } </script> <style> .container { margin: 20px auto; } .card { margin-bottom: 20px; } </style> ``` 在上面的代码中，我们定义了一个包含六个数据项的数组，并使用v-for指令循环遍历每个数据项。使用Bootstrap的栅格系统，我们将每个数据项放在一个具有col-md-4类的div中，以实现一行三列的效果。最后，我们使用CSS样式设置卡片的边距。 ### 回答2： 在Vue中，可以使用v-for指令来循环渲染一行三列的列表。 首先，在Vue组件中定义一个数组，里面包含要循环渲染的数据，比如： ``` data() { return { items: [1, 2, 3, 4, 5, 6] } } ``` 接下来，在模板中使用v-for指令来循环渲染列表，使用v-bind指令来绑定每个项的数据，比如： ``` <div> <div v-for="item in items" :key="item"> {{ item }} </div> </div> ``` 上述代码中，v-for指令会遍历items数组中的每一项，并将当前项的值赋给item变量，然后在循环体中渲染当前项的值。使用:key绑定每一项的唯一标识，以提高渲染性能。 为了实现一行三列的布局，可以使用CSS来设置每个项的宽度为33.33%（或根据实际需求设置），并设置适当的样式，比如： ``` <style> .item { width: 33.33%; display: inline-block; text-align: center; } </style> ``` 最后，将以上代码整合在Vue组件中，就可以在浏览器中看到一行三列的列表。每个项的宽度为33.33%，并按照数组中的值依次渲染。 以上就是在Vue中实现一行三列列表的简单方式，通过v-for指令和CSS样式来实现。根据具体需求，还可以进一步扩展和定制列表的样式和布局。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值