v-for循环里面的点击事件控制div的显示与隐藏

最新推荐文章于 2023-08-07 20:18:34 发布

漂亮小咪

最新推荐文章于 2023-08-07 20:18:34 发布

阅读量605

点赞数

文章标签： javascript 开发语言前端 vue.js

本文链接：https://blog.csdn.net/su_yun/article/details/130830948

版权

本文介绍了如何在Vue.js中使用v-for循环结合点击事件，通过为每个循环项设置自定义参数flag，动态控制div的显示与隐藏。通过在div上设置条件判断，实现点击事件的有效控制。

摘要由CSDN通过智能技术生成

1、在页面写好循环和点击事件（点击事件带上参数index）

<template>
  <div v-for="(item,index) in List" :key="index">
    <div @click="change(index)">{
   {
    item.name }}</div>
    <div>{
   {
    item.age }}</div&g

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

漂亮小咪

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-for循环里面的点击事件控制div的显示与隐藏

/ 网络请求方法 async getuserList() {// 点击事件 change(index) {
复制链接

扫一扫

vue：动态组件——实现当点击一个按钮时，显示相应的div，并将其他div都隐藏起来

yyyyyyyyyyy_9的博客

09-08

1333

乐多_通过动态组件 () 来实现当点击一个按钮时，它将显示相应的，并将其他都隐藏起来。

v-for内所有div中的内容（多行多列）全部自适应自动左右滚动（适用于表格）vue2

最新发布

qq_36489355的博客

07-25

316

【代码】v-for内所有div中的内容全部自适应自动左右滚动。

参与评论您还未登录，请先登录后发表或查看评论

【v-for循环里面的点击事件显示和隐藏】

weixin_47416539的博客

04-02

1570

v-for循环里面的点击事件显示和隐藏

v-for循环后，点击事件控制子组件显示与隐藏

m0_61950846的博客

07-11

1337

for循环出来的东西里面，如果有子组件就会牵一发而动全身，所以我们希望，可以进行控制单个组件的展示与隐藏

for 循环给按钮添加点击事件控制显示隐藏

weixin_69797788的博客

12-29

310

循环控制按钮点击事件，显示隐藏div

使用Vue中 v-for循环列表控制按钮隐藏显示功能

12-29

v-for可以把数据中的一个数组对应为一组元素 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。 – 实现效果如图需求描述：第一个显示蓝色按钮，代表数据最终状态；其余按钮为灰色，显示数据流转记录。返回的数据类型前端页面代码 <div class=leftProcessBox> <div class=leftProcess v-for=(listLZPar,index) v-show=listLZPar.operate_type!>

Vue v-for循环之@click点击事件获取元素示例

12-13

1、设置一个隐藏值的放置Id的div，点击div就获取id，传参到后台（点击一部分） <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 软件开发网(mscto.com)&...

vue v-for循环不同样式/控制显隐

Jadeyqc的博客

06-28

934

通过 :style = "函数()" 或者:class="函数" 可以通过函数加传参来控制不同列的样式。 <div class="start" v-for="(list,index) in lists" :key="list.id" :style.prevent="aa(list.size)" ref="list"> <div :class="className(list.id)" :style="{fontSize:list.size+'px'}">.

vue for循环中点击显示与隐藏部分数据（独立控制）

qq_42979106的博客

02-10

1773

vue for循环中点击显示与隐藏部分数据（独立控制）

一、使用v-for进行遍历时，对不同的按钮绑定不同的点击事件

weixin_51431465的博客

08-07

428

【代码】一、使用v-for进行遍历时，对不同的按钮绑定不同的点击事件。

v-for循环根据条件控制显示或隐藏

m0_63701303的博客

03-15

1445

v-for循环根据条件控制显示或隐藏

vue使用之v-for

前端李小白的博客

10-18

497

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。当 Vue 正在更新使用 v-for 渲染的元素列表时，它默认使用“就地更新”的策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它...

如何给Vue v-for循环渲染出的元素（导航栏）批量添加点击事件 及点击后添加css类样式及点击后路由跳转切换

m0_46470372的博客

03-17

7332

如何给Vue v-for循环渲染出的元素批量添加点击事件 及点击后添加css类样式及点击后路由跳转切换能够实现或解决的问题给Vue v-for循环出的元素批量添加点击事件，并以自己在数组中的下标为参数给Vue v-for循环出的元素批量添加点击后激活的css类（三元运算符方式），且在点击其他同列元素的时候自动取消该类给Vue v-for循环出的元素添加切换路由的事件正文 ...

div组件使用v-for遍历对象

qq_42340235的博客

10-25

2335

div组件使用v-for遍历对象

vue中使用v-for循环出来的数据,如何单独控制显示隐藏

weixin_45453560的博客

07-29

7020

vue中使用v-for循环出来的数据,如何单独控制显示隐藏

div中使用V-FOR vue与elementui

00年女程序员分享自己的学习笔记

12-06

646

<div v-for="(item,index) in arrayText" :key="index"> <span>{{index + 1}}</span> <span class="text-name">{{item.text}}</span> &nbs

v-for 中使用v-if控制显示和消失

09-01

在Vue的模板中，我们可以使用`v-for`指令来循环渲染一个数组或对象中的元素，而使用`v-if`指令可以根据条件来控制元素的显示和隐藏。当我们想要在`v-for`循环中添加一些条件来控制某些元素的显示和消失时，我们...