vue 实现显示与隐藏
vue 实现显示与隐藏// An highlighted block<template><div><header-top><span slot="title" class="name">版本更新</span></header-top><div class="h_co...
·
vue 实现显示与隐藏
// An highlighted block
<template>
<div>
<header-top>
<span slot="title" class="name">版本更新</span>
</header-top>
<div class="h_con">
<div class="h_question">
<div v-for="(item,index) in questList" :key="index">
<div class="h_ques" @click="toggle(item)">{{item.title}}
<span style="float:right;" v-if="item.show"><img src="../images/back.png" alt="" class="s_img"></span>
<span style="float:right" v-else><img src="../images/left.png" alt="" class="s_img1"></span>
</div>
<div class="h_answer" v-show="show">
{{item.article}}
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { get_version} from "@/api/chttp.js";
import HeaderTop from "@/components/HeaderTop";
import Vue from "vue";
import { Toast } from "vant";
Vue.use(Toast);
export default {
name: "Version",
data() {
return {
show:false,
questList:[
{title:'2.0.0版本功能介绍',article:'可以实现群聊、发送名片、交换名片、保存到通讯录等功能',show:false},
{title:'1.0.0版本功能介绍',article:'可以实现群聊、保存到通讯录等功能',show:false},
]
};
},
components: {
HeaderTop
},
mounted (){
this.get_questList();
},
methods: {
toggle(item) {
// this.show = !this.show;
if (item.article.length != 0) {
item.show = !item.show;
} else {
item.show = item.show;
}
},
get_questList(){
const params = {
type:1
};
get_version(params).then(res => {
this.questList = res.data.data;
});
}
}
};
</script>
<style scoped lang="stylus">
.h_con
margin-top 105px
.h_question
font-size 28px
.h_ques
color #656565
padding 0px 20px
line-height 100px
// border-bottom 2px solid #efeff5
border-top 2px solid #efeff5
.s_img
width 28px
height 20px
.s_img1
width 20px
height 28px
.h_answer
color #656565
padding 20px
line-height 35px
background-color #f5f5f5
</style>
更多推荐
已为社区贡献6条内容
所有评论(0)