需求:
使用v-for循环遍历列表时候,点击列表项item, 可以获取item的相关信息。
效果👇:
利用@click="getData(item.id,item.title)" 方法传送
代码🌰
<template>
<div>
<ul>
<li
class="item"
v-for="item in arrData"
:key="item.id"
@click="getData(item.id,item.title)">
{{ item.title }}id={{item.id}}
</li>
</ul>
</div>
</template>
<script>
export default {
data () {
return {
arrData: [
{ id: 1, title: '爱我中华' },
{ id: 2, title: '祖国需要我的努力' },
{ id: 3, title: '义勇军进行曲' },
{ id: 4, title: '起来起来起来' },
]
}
},
methods: {
getData (id, title) {
this.$message({
message: `当前被点击的id= ${id}标题为:${title}`,
type: 'success'
})
}
}
}
</script>
<style scoped>
.item {
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
background: #e2e2e2;
color: red;
}
.item:hover {
background: #e2e234;
}
</style>