Vue给每个v-for的元素设置不同的点击事件
如何给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")
}
}
}
更多推荐
已为社区贡献2条内容
所有评论(0)