vue实现展开收缩内容

最新推荐文章于 2024-09-24 11:07:38 发布

施玥喵

最新推荐文章于 2024-09-24 11:07:38 发布

阅读量666

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/macangyewangs/article/details/115539588

版权

本文介绍如何使用 Vue.js 框架来实现在网页中内容的展开和收缩效果。通过绑定数据属性和事件监听，结合条件渲染指令，轻松实现这一常见交互功能。

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

<template>
  <div class="contentweb">
    <div class="type">
      <span class="type_a">类型:</span>
      <div class="type_b">
        <span
          class="type_bs"
          v-for="(item, index) in testList"
          :key="index"
          :class="{ type_bshover: active == index }"
          @click="tab(index)"
          >{
  { item.cont }}</span
        >
      </div>

      <span class="type_c" @click="showDisplay = !showDisplay">
        {
  { textSwitch }}
        <img src="../../assets/image/project_down.png" alt="" v-show="down" /> //向下的图片
        <img src="../../assets/image/project_up.png" alt="" v-show="up" /> //向上的图片
      </span>
    </div>
  </d