我用的是原生 js 的形式，如果有更好的形式，评论留言哦~
<template>
<div class="content">
<div class="content-show">
<div class="c-title">{{datainfo.title}}</div>
<div class="c-detail" v-html="datainfo.body" @click="toggleDetail"></div>
</div>
</div>
</template>
<script>
export default {data(){
return{datainfo:{}
}
},
methods:{toggleDetail(e){let items = document.querySelectorAll('.collapse-item'),
itemWraps = document.querySelectorAll('.item_wrap');
var el = e.target.nextElementSibling;
if(el.classList.contains('item_wrap')){el.style.display = el.style.display=="none"?"block":"none";}
},
getAboutInfo(id){
this.datainfo=''
this.$api.getAboutPt(id).then((res)=>{if(res.data &&res.data.length){this.datainfo=res.data[0];
this.$nextTick(()=>{if(id=='10'){let items = document.querySelectorAll('.collapse-item'),
itemWraps = document.querySelectorAll('.item_wrap');
itemWraps.forEach((ele, index) => {ele.style.display = 'none';});
itemWraps[0].style.display="block";
}
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
.content{
min-height: 500px;
&.right-content{margin-left: 350px;}
.content-show{
color: #333;
.c-title{
font-size: 20px;
padding: 30px 0;
}
}
}
</style>代码如上
实现成果：
代码具体作用：
另附一下 dom 元素构造
须要留神：
新插入的 dom 在 <style lang=”scss” scoped></style> 中写的款式不起作用，能够去掉 scoped 限度或者从 main.js 中引入样式表进行款式笼罩。
款式比拟简陋，可按需批改