关于vue.js:vue中vhtml插入dom元素后实现折叠面板效果

我用的是原生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中引入样式表进行款式笼罩。

款式比拟简陋，可按需批改