写一个使用vue实现列表功能,这个列表可点击触发事件的代码
时间: 2024-05-14 20:13:39 浏览: 8
Sure, here's an example code for implementing a list with clickable items using Vue:
```html
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index" @click="onClick(index)">
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: ["Item 1", "Item 2", "Item 3"],
};
},
methods: {
onClick(index) {
alert(`Clicked item ${index + 1}`);
},
},
};
</script>
```
In this example, we're using the `v-for` directive to loop through the `items` array and render each item as an `<li>` element. We're also binding the `@click` event to call the `onClick` method when an item is clicked. The `onClick` method receives the index of the clicked item as a parameter, and we're using it to display a simple alert message.