v-for循环出来的元素绑定不同事件

最新推荐文章于 2024-08-10 16:36:49 发布

up·

最新推荐文章于 2024-08-10 16:36:49 发布

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/itsxyu/article/details/102784464

vue 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的功能，通过点击不同的li元素来触发相应的事件处理函数，展示了如何在模板中绑定点击事件以及在组件的methods中定义这些事件处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击不同li触发不同事件

<template>
  <div class="home">
    <h2>Essential Links</h2>
    <ul>
      <li v-for="(item,index) in lists" :key="index" @click="getLists(item.methods)">{{item.title}}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'Home',
  data () {
    return {
      lists:[
        {title:'昨天',methods:'dayBefore'},
    　　{title:'今天',methods:'today'},
    　　{title:'近7天',methods:'firstSevenDays'}
      ]
    }
  },
  methods:{
    getLists:function(methodsWords){
      this[methodsWords]();
    },
    dayBefore:function(){
      console.log("dayBefore")
    },
    today:function(){
      console.log("today")
    },
    firstSevenDays:function(){
      console.log("firstSevenDays")
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>

</style>