v-for 自定义展开收缩div

最新推荐文章于 2023-02-17 14:41:07 发布

時間不夠以後

最新推荐文章于 2023-02-17 14:41:07 发布

阅读量401

点赞数

分类专栏：效果实现文章标签： javascript css3 css

本文链接：https://blog.csdn.net/weixin_43972213/article/details/122963882

版权

效果实现专栏收录该内容

19 篇文章 0 订阅

订阅专栏

本文探讨了Vue.js中的模板语法，通过实例展示了`v-for`和`v-if`指令的用法，以及如何点击内容标题展开/隐藏详细描述。代码中使用了数据绑定和事件监听来控制内容的显示状态，对于理解和应用Vue.js模板有很好的参考价值。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<template>
  <div>
    <div class="main_area">
      <div v-for="(item, index) in helpList" :key="index">
        <div class="content_main">
          <div class="content_text">
            <div class="content_title" @click="clilkHelpItem(item, index)">
              <p class="title">{{ item.title }}</p>
            </div>
            <p class="desc" v-show="item.isShow">
              {{ item.text }}
            </p>
          </div>
        </div>
        <div class="line"></div>
      </div>
    </div>
  </div>
</template>
<script>
 
export default {
  name: "VipHelp",
  data () {
    return {
      helpList: [
        {
          title: 'title1',
          text: '这里是1的content'
        },
        {
          title: 'title2',
          text: '这里是2的content',
        },
        {
          title: 'title3',
          text: '这里是3的content',
        }
      ],
    }
  },
 
  methods: {
    clilkHelpItem (v, index) {
      let helpList = JSON.parse(JSON.stringify(this.helpList))
      helpList[index].isShow = !v.isShow
      this.helpList = helpList
    },
  }
}
</script>
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
}
.main_area {
  margin: 60px 16px 0 16px;
}
.content_main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content_text {
  width: 100%;
}
.content_title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.title {
  font-size: 15px;
  font-family: PingFang, PingFang-SC;
  font-weight: bold;
  text-align: left;
  color: #333333;
}
.desc {
  font-size: 16px;
  font-family: PingFangSC, PingFangSC-Regular;
  font-weight: 400;
  text-align: left;
  color: #666666;
  margin-top: 10px;
  line-height: 27px;
}
.line {
  background: #eeeeee;
  height: 0.5px;
  width: 100%;
  margin: 19px 0;
}
</style>