vue 实现显示与隐藏

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_conmargin-top 105px.h_questionfont-size 28px.h_quescolor #656565padding 0px 20pxline-height 100px// border-bottom 2px solid #efeff5border-top 2px solid #efeff5.s_imgwidth 28pxheight 20px.s_img1width 20pxheight 28px.h_answercolor #656565padding 20pxline-height 35pxbackground-color #f5f5f5</style>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！