vue 实现显示与隐藏

最新推荐文章于 2024-07-26 08:15:00 发布

小小雪花儿

最新推荐文章于 2024-07-26 08:15:00 发布

阅读量6k

点赞数 1

分类专栏： vue学习文章标签： vue 显示与隐藏

本文链接：https://blog.csdn.net/qq_43671996/article/details/90698807

版权

vue学习专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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>