vue v-forループで一部の要素にイベントとスタイルを追加する方法
vueでループ要素にイベントとスタイルを統一的に追加するのは簡単ですが、ループした要素にイベントとスタイルを単独で追加する方法を見てみましょう.
demo.vue:
コードから分かるように、ループで生成されたセルにスタイルとイベントを個別に追加するには、各セル特有の身分証明書であるkey(index 2)を使用し、まず行全体のセルにイベントを定義し、key値を転送すればokになり、イベント関数をクリックするとkey値で命名された対応関数が実行されます.
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(index 2)を使用し、まず行全体のセルにイベントを定義し、key値を転送すればokになり、イベント関数をクリックするとkey値で命名された対応関数が実行されます.