vue v-forループで一部の要素にイベントとスタイルを追加する方法

8777 ワード

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(index 2)を使用し、まず行全体のセルにイベントを定義し、key値を転送すればokになり、イベント関数をクリックするとkey値で命名された対応関数が実行されます.