在我的vue项目中，有一个列表，是使用v-for渲染的，当我的鼠标移入当前数据渲染的一条列表时，在当前列表末尾显示一个按钮，鼠标移出消失

在Vue.js中，你可以通过监听`mouseover`和`mouseout`事件以及结合`v-for`循环来实现这个功能。这里是一个简单的示例：

<template>
  <div>
    <ul id="list">
      <li v-for="(item, index) in items" :key="index">
        {{ item.name }}
        <button @mouseenter="showButton(index)" @mouseleave="hideButton(index)">查看详情</button>
        <button v-if="isShowingButton(index)" @click="handleDetail(index)">查看详情</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 你的列表数据
      showButtons: [] // 存储每个元素是否显示按钮的状态
    };
  },
  methods: {
    showButton(index) {
      this.showButtons[index] = true;
    },
    hideButton(index) {
      this.showButtons[index] = false;
    },
    handleDetail(index) {
      // 点击详细按钮时处理逻辑
    }
  },
  computed: {
    isShowingButton(index) {
      return this.showButtons[index];
    }
  }
};
</script>

在这个例子中，`v-for`遍历你的列表数据，并为每个元素生成一个按钮。当你将鼠标移动到某个元素上时，会触发`showButton`方法设置对应索引处的`showButtons`数组为`true`，表示按钮应该显示。相反，鼠标移出时，调用`hideButton`方法隐藏按钮。`isShowingButton`是计算属性，用于条件渲染第二个按钮。