vue v-for循环中如何给部分元素添加事件和样式

2023-11-07

vue中给循环元素统一添加事件和样式很简单,下面看下单独给某个循环出来的元素添加事件和样式如何实现。

demo.vue:

<template>
    <table>
       <tr >
          <th v-for = "head in muta">{{head}}</th>   //循环生成表头
       </tr>
       <tr v-for = "(item,index) in version" :key = "index" >     //循环生成每行的数据
          <td v-for = "(child,index2) in item" :key = "index2" @click = "run(index2)" :class = "index2 == 'num'||index2 =='gu' ? 'underl' : ''">{{child}}</td>                                 //循环生成每个单元格的数据
       </tr>
    </table>
</template>

<script>
  export default {
    name: "demo",
    data() {
      return {
        muta:[
          '方案版本',
          'BOM清单',
          '原理图',
          '版本需求',
          '固件',
          '添加时间',
        ],
        version:[
           {
              num: '1.10.0',
              bom: 'ooo.xlsx',
              reason: 'oooo.doc',
              need:'2222.doc',
              gu:'1.2.01',
              time:'2018-06-14 12:12:12',
          },
          {
            num: '1.22.0',
            bom: 'ooo.xlsx',
            reason: 'oooo.doc',
            need:'2222.doc',
            gu:'1.2.01',
            time:'2018-06-14 12:12:12',
          },
        ],
       }
      },
    methods:{
      run(index2){
        this[index2]()
      },
      num(){
        console.log('num')
      },
      gu(){
        console.log('gu')
      },
    },
  }
</script>

从代码可以看出,要想给循环生成出的单元格单独添加样式和事件,就要用到每个单元格特有的身份证明即key(index2),先给整行单元格定义事件,然后把key值传进去就ok了,点击事件函数会执行以key值命名的对应函数。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue v-for循环中如何给部分元素添加事件和样式 的相关文章

  • 电脑输入英文字符的时候字体突然变了样

    问题描述 电脑输入英文字符的时候 突然变成了粗粗的还有间隙 如下所示 与正常对比 te bie pang de zi fu 出现原因 可能是因为无意间按到了中文的全半角切换 快捷键 可以把这个快捷键关掉 也可以不关 解决办法 解决这个问题的

随机推荐

  • Linux系统上安装docker

    文章目录 一 Docker的简介 二 Docker的组成部分 三 Docker的安装命令 安装之前先卸载系统上原有的Docker 安装需要的安装包yum utils 设置镜像仓库地址 安装docker相关的引擎 安装docker 启动doc
  • python打包列表文件到一个包

    python打包列表文件到一个包 def tar file tarfile list ret os system tar pzcvf x tar gz s join tarfile list if ret 0 return True els
  • 【机器学习 - 1】:knn算法

    文章目录 机器学习的概念和基础 knn算法的实现过程 封装knn算法 总结 机器学习的概念和基础 机器学习可以两类任务 分类任务和回归任务 以机器学习本身来进行分类可分为 监督学习 非监督学习 半监督学习 增强学习 监督学习 给机器的训练数
  • 绿幕换背景、绿幕视频实时换背景

    PS 陆陆续续做绿幕抠图相关的工作也有2年之久了 一直研究普通摄像头下的绿幕抠图工作 这样的工作要比摄影棚下的难度要高很多 当然现在也出来很多的工具 抠图算法也越来越成熟 本人较懒 后面会一点点的把相关内容补齐 先上图 上面是效果 边缘做的
  • 卷积核(又叫filter,neuron),设计CNN layers的技巧

    loss entropy求导 为0 那么该怎样求导呢 并行计算 视频 https www bilibili com video BV1Ht411g7Ef p 13 CNN的术语 共享参数 第二种版本解释CNN 前一个64个filter 通过
  • freeswitch六、freeswitch会议功能

    freeswitch默认的会议号 FreeSwitch 默认支持会议功能 有如下特点 1 不需要创建一个会议室的操作 只需要通过 conference 拨码计划就可以实现 2 会议室不真正存在 直到有人呼入为止 3 会议功能很强大 能实现灵
  • 【AOSP】Settings应用界面逻辑

    源码参考 AOSPXRef 现象效果 调试UI显示 Settings应用子界面Activity绝大部分都是SubSetting 通过dumpsys指令查看当前活动 adb shell dumpsys activity activities
  • python自动化_检测系统的空文件夹

    一 空文件夹的判断 1 os listdir 函数 2 权限得注意 二 统计检测消耗时间 1 引入datetime日期库 2 扫描开始start time 扫描结束end time 3 因为权限的原因 所以使用了try import os
  • Matlab中使用Mex时遇到的问题及解决方法

    在Matlab命令行使用mex命令时出现错误 error Building MFC application with MD d CRT dll version requires MFC shared dll version Please d
  • 中国姓氏大全(常见508个,罕见740个)

    1 比较靠谱的资料 资料来源 百度百科 中国姓氏 常见姓氏 508个 赵 钱 孙 李 周 吴 郑 王 冯 陈 褚 卫 蒋 沈 韩 杨 朱 秦 尤 许 何 吕 施 张 孔 曹 严 华 金 魏 陶 姜 戚 谢 邹 喻 柏 水 窦 章 云 苏 潘
  • xml报文编写以及解析

    封装电子保单回执报文 Document document org dom4j DocumentHelper createDocument document setXMLEncoding UTF 8 Element root document
  • ChatGPT“保姆级教程”——手把手教你1分钟快速制作思维导图(Markmap/Xmind+Markdown)

    目录 前言 使用ChatGPT生成markdown格式主题 Markmap Markdown 使用Markmap生成思维导图 Xmind Markdown 使用Xmind生成思维导图 建议 其它资料下载 前言 思维导图是一种强大的工具 它可
  • hdu 1003 最大连续子序列和及起始位置 && hdu 1087 最大上升子序列和

    hdu 1003 题意 求最大连续子序列和及起始位置 对于动态规划问题要找出其子问题 考虑到dp的无后效性 dp i 表示以i为结尾的最大值 当dp i 1 gt 0时 以i 1为值对以i为结尾的值有贡献 否则起始位置变为自己 动态地更新最
  • [从零开始学DeepFaceLab-6]: 使用-命令行八大操作步骤-第3步:从目标视频中提取图片

    目录 总体流程 步骤3 从目标视频中提取图片 3 0 目标视频文件和大小的选择 3 1 命令 3 cut video drop video on me bat 可选
  • 三大主流软件负载均衡器对比(LVS、Nginx、HAproxy)

    资料来自网络 做了部分的补充说明 LVS 1 抗负载能力强 性能高 能达到F5的60 对内存和CPU资源消耗比较低 2 工作在网络4层 通过VRRP协议 仅作代理之用 具体的流量是由linux内核来处理 因此没有流量的产生 3 稳定 可靠性
  • vue生命周期 —— 模板编译

    Vue 的 template 是如何编译成真正的 HTML 并做到双向绑定等等特殊功能的呢 在这张图中 我们可以看到 Vue 的模板编译是在 mount 的过程中进行的 在 mount 的时候执行了 compile 这个方法来将 templ
  • Linux 根目录满了 linux根目录扩容方法 详解!!!

    CentOS 7根目录扩容方法 最近公司测试服务器根目录满了 便有同事网上找了教程进行扩容 但是由于找的教程不够严谨 导致扩容失败 还丢失了一部分文件 所以这里详细说明一下方法 方法流程说明 1 查看系统存储空间 看一下 home做在卷已用
  • 【angular】项目实践-表格显示

    介绍 前端中经常用到的组件就是表格了 下面简单介绍下表格的显示 HTML文件 div class container style margin bottom 10px width 95 div class row div div
  • SpringBoot -- 使用logback记录日志

    Logback介绍 Logback是由log4j创始人设计的另一个开源日志组件 官方网站 http logback qos ch Logback的内核重写了 在一些关键执行路径上性能提升10倍以上 而且logback不仅性能提升了 初始化内
  • vue v-for循环中如何给部分元素添加事件和样式

    vue中给循环元素统一添加事件和样式很简单 下面看下单独给某个循环出来的元素添加事件和样式如何实现 demo vue