在Vue中，直接使用v-if和v-for在同一个元素上是不推荐的，因为这会导致渲染列表时每次都需要重新计算条件，影响性能。不过，你可以通过在模板中嵌套一个额外的<template>元素或者使用计算属性来预处理数据，从而在v-for中更高效地控制v-if。
针对你的场景，你可以通过维护一个额外的数组或对象来跟踪哪些项的“管理”按钮应该被隐藏。这里，我假设你有一个额外的数据属性（例如hiddenButtons）来存储这个信息，它可能是一个数组，其中每个元素对应queryParams.contentList中的一个项的隐藏状态（例如，使用索引作为键）。
以下是一个可能的实现方式：
<template>
<div v-for="(item, index) in queryParams.contentList" :key="index">
<div class="top-title">
<div>
<!-- 使用v-if来控制按钮的显示隐藏 -->
<el-button v-if="!hiddenButtons[index]" @click="handlePopup(index)" type="text">管理</el-button>
</div>
</div>
<child
@watchContentList="(val, idx) => handleWatchContentList(val, idx)"
:index="index"
:data="item"
ref="sourceFrom"
/>
</div>
</template>
<script>
export default {
data() {
return {
queryParams: {
contentList: [], // 假设这是你的列表数据
// 初始化hiddenButtons，假设与contentList长度相同，初始值全为false
hiddenButtons: new Array(this.queryParams.contentList.length).fill(false),
},
};
},
methods: {
handlePopup(index) {
// 处理点击事件
console.log(`Handling popup for index: ${index}`);
},
handleWatchContentList(val, idx) {
// 根据val的值更新hiddenButtons中对应索引的值
this.hiddenButtons[idx] = val === 你的指定数字; // 替换'你的指定数字'为实际的条件值
},
},
};
</script>
注意，这里handleWatchContentList方法接收val和idx（或index）作为参数，并据此更新hiddenButtons数组。你需要将子组件中触发的watchContentList事件的参数修改为同时发送值和索引，或者根据你的实际情况调整这部分逻辑。
另外，请确保在组件的data函数中正确初始化hiddenButtons数组，其长度应与queryParams.contentList一致，并且初始值全部为false（或根据你的需求设置）。这样，你就可以在v-for循环中使用v-if="!hiddenButtons[index]"来控制“管理”按钮的显示隐藏了。
极客观点
项目管理
HarmonyOS
首先管理按钮和child都是循环出来的，所以管理按钮的显示隐藏状态应该是一个数组，那么可以在给queryParams.contentList赋值之前添加一个字段，用来控制button的显示隐藏，或者也可以新增一个queryParams.contentList.length长度的数组，用数组中的每一项，来控制button的显示隐藏；最后在watchContentList方法中，根据index去修改queryParams.contentList的属性或新增数组的状态。