展开收起操作

原创于 2023-05-25 17:37:10 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

一、业务场景：
搜索的时候展开收起用来隐藏部分数据

二、问题描述：
需要隐藏部分数据

三、具体实现步骤：

  <span style="margin: 1px 40px 0 10px;">
          <span style="color: #0a9afe;cursor: pointer" @click="showAll = !showAll">
            {{ showAll ? '收起' : '展开' }}<a-icon :type="showAll?'up':'down'"  style="font-size: 14px;color: #1677FF;line-height: 22px;font-weight: 400;"/>
          </span>
  </span>
  <div v-if="showAll">要隐藏的内容 </div>

定义状态
    data() {
      return {
        showAll:false,//是否展开全部
        }
        }