Vue给每个v-for的元素设置不同的点击事件

给每一个不同的点击事件

思路：data中的v-for依赖的对象中在添加一个属性，属性值分别设置，然后在方法中去写各自的方法，当点击事件触发时，调用相对应的方法。但不适用于数据量太大，v-for生成的元素太多

 <template>
    <ul>
      <li v-for="(item,index) in lists" :key="index" @click="getLists(item.method)">{{item.title}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      lists:[
        {title:'第一个元素',method:'item1'},
    　　{title:'第二个元素',method:'item2'},
    　　{title:'第三个元素',method:'item3'}
      ]
    }
  },
  methods:{
    getLists:function(itemMethods){
      this[itemMethods]();
    },
    item1:function(){
      console.log("I am item1's method")
    },
    item2:function(){
      console.log("I am item2's method")
    },
    item3:function(){
      console.log("I am item3's method")
    }
  }
}