vue v-for循环中如何给部分元素添加事件和样式
统一添加样式很简单,下面看下给单独某个循环出来的元素添加事件和样式。<template><div id="bbottom" class=""><div class="bottom"><div class="title"><el-breadcrumb separator-class="el-ico...
·
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值命名的对应函数。
更多推荐
已为社区贡献2条内容
所有评论(0)