给每一个不同的点击事件

思路: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")
    }
  }
}

Logo

前往低代码交流专区

更多推荐