关于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中引入样式表进行款式笼罩。

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