使用v-for列出班级列表，每个班级的后面有个按钮【查看详情】，点击按钮后，在该班级下方显示一个div，展示该班级详情，同时隐藏其它班级详情。
伪代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| <template v-for="class in classes">
<span>{{class.name}}</span>
<button @click='showDetail(class)' >查看详情</button>
<div v-show="class.show_detail == true">
<span>{{class.name}}</span>
<span>{{class.peoples}}</span>
</div>
</template>
<script>
export default {
data() {
return {
classes: [],
};
},
created() {
this.fetchData();
},
methods: {
fetchData() {
axios("/getClasses")
.then((response) => {
for (const key in response.data) {
response.data[key].show_detail = true
}
// 一定要先在for循环加入show_detail属性，然后再一次性赋值给classes
this.classes = response.data;
})
},
showCabins(params){
for (const key in this.classes) {
this.classes[key].show_detail = false
}
// 注意：如果参数是对象，修改对象中的属性，属于引用传递，原始对象会发生改变
params.show_detail = true
},
},
};
</script>
|
此处有两个知识点：
1.showDetail函数中的参数params是对象，如果修改了params中的属性，则原始变量classes也会改变
2.从axios中拿到的数据中没有show_detail这个属性，如果是先把response.data赋值给classes，然后for循环中给classes加上show_detail属性，则v-show无效，无法控制班级的显示隐藏