直接上代码,共两种情况
1.可以同时展示多个li的详情,每个li的详情是否显示不受影响。
2.点击哪个li,展示哪个li的详情,每次只展示一个,其它的隐藏。(被注释的代码是这种情况)
<template>
<div class="hello">
<h3>试玩相关问题</h3>
<div v-for="(item, index) in data" :key="index" class="oneqs">
<div class="wt" @click="showDetail(index)">
<span class="question">Q:</span>
{{item.wt}}
<!-- <img :src="isShow === index?imgurl1:imgurl2" alt /> -->
<img :src="item.hide?imgurl1:imgurl2" alt />
</div>
<!-- <div class="da" v-show="isShow === index"> -->
<div class="da" v-show="item.hide">
<span class="answer">A:</span>
{{item.da}}
</div>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "",
isActive: false,
activeIndex: -1,
isShow: -1,
imgurl2:require("../assets/jt_down.png"),
imgurl1:require("../assets/jt_up.png"),
data: [
{
hide:0,
wt: "如何打开应用设备号权限?",
da:
"设置--应用设置--权限管理,打开对应手机识别码或者IMEI权限,此为通用流程。部分手机不适用该通用流程烦请自行百度具体步骤。"
},
{
hide:0,
wt: "如何打开应用设备号权限?",
da:
"设置--应用设置--权限管理,打开对应手机识别码或者IMEI权限,此为通用流程。部分手机不适用该通用流程烦请自行百度具体步骤。"
},
{
hide:0,
wt: "如何打开应用设备号权限?",
da:
"设置--应用设置--权限管理,打开对应手机识别码或者IMEI权限,此为通用流程。部分手机不适用该通用流程烦请自行百度具体步骤。"
},
{
hide:0,
wt: "为什么注册了游戏但页面提示尚未注册?",
da:
"设置--应用设置--权限管理,打开对应手机识别码或者IMEI权限,此为通用流程。部分手机不适用该通用流程烦请自行百度具体步骤。"
}
]
};
},
mounted(){
console.log(this.data)
},
methods: {
showDetail: function(index) {
// let that = this;
// if (that.isShow === index) {
// that.isShow = -1;
// } else {
// that.isShow = index;
// }
this.data[index].hide=!this.data[index].hide;
}
}
};
</script>
<style scoped>
h3 {
text-align: center;
}
.oneqs {
overflow: hidden;
margin: 5px 0;
font-size: 14px;
font-family: Apple LiGothic Medium, SimHei, Geneva, Arial, Helvetica, sans-serif;
}
.question {
padding: 0 5px;
font-weight: bold;
}
.wt {
padding: 0 15px;
position: relative;
height: 40px;
line-height: 40px;
margin-top: 5px;
background: #FFF;
}
.wt img {
width: 15px;
position: absolute;
right: 10px;
top: 15px;
}
.da {
padding: 7.5px 20px;
margin-top: 10px;
margin-bottom: 0;
background: #FFF;
line-height: 22px;
}
.answer {
color: red;
font-weight: bold;
}
</style>