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

1 篇文章 0 订阅

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值命名的对应函数。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值