ElementUI 点击展开/隐藏

蔚落 2022-10-29 03:17 416阅读 0赞

# 一、概述 #

在项目，需要使用一个功能，点击某个按钮，展开/隐藏 某些说明文字。

# 二、项目演示 #

新建一个vue项目，安装ElementUI 模块即可。

新建test.vue

<template>
      <div style="width: 70%;margin-left: 30px;margin-top: 30px;">
        <el-button type="danger" icon="el-icon-info" @click="changeDisplay">
          <span v-if="isDisplay==false">如梦令·昨夜雨疏风骤(点击展开)</span>
          <span v-else>如梦令·昨夜雨疏风骤(点击隐藏)</span>
        </el-button><br><br>
        <div style="border: 1px solid blue;line-height: 0.8;" v-show="isDisplay">
          <br>
          昨夜雨疏风骤，<br><br>
          浓睡不消残酒，<br><br>
          试问卷帘人，<br><br>
          却道海棠依旧。<br><br>
          知否，<br><br>
          知否，<br><br>
          应是绿肥红瘦。<br>
          <br>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            isDisplay:false
          }
        },
        methods: {
          changeDisplay(){
            this.isDisplay = !this.isDisplay
          },
        }
      }
    </script>
    
    <style>
    </style>

访问测试页面

![c39e45a2fce121edf268621e94158623.png][]

反复点击按钮，效果如下：

![aed80bd2d0feef0741da1906bffb87be.gif][]

[c39e45a2fce121edf268621e94158623.png]: /images/20221024/9cf3658849eb407bbebbdc83693fd94e.png
[aed80bd2d0feef0741da1906bffb87be.gif]: /images/20221024/cbe2f2f94c454440bde7b000f0fc561c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，416人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML点击显示、点击隐藏details 标签

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(r

雨点打透心脏的1/2处/ 2024年03月16日 21:32/ 0 赞/ 32 阅读

相关微信小程序-点击内容展开隐藏评论文章等

背景在网上看到很多这样的，有很多这样的例子。 > https://gitee.com/dggy/expendable/tree/master > 比如上面这个大哥

分手后的思念是犯贱/ 2023年05月29日 02:39/ 0 赞/ 2 阅读

相关 ElementUI 点击展开/隐藏

一、概述在项目，需要使用一个功能，点击某个按钮，展开/隐藏某些说明文字。二、项目演示新建一个vue项目，安装ElementUI 模块即可。新建test

蔚落/ 2022年10月29日 03:17/ 0 赞/ 417 阅读

相关点击显示再次点击隐藏

<script> $(function()\{ $('\a').click(function()\{//点击a标签 if($('

亦凉/ 2022年06月07日 09:06/ 0 赞/ 375 阅读

相关 EasyUI tree 实现点击展开/折叠

$('tt').tree( { url : 'getTree.do', animate: true, onClick:

冷不防/ 2022年06月04日 02:24/ 0 赞/ 340 阅读

相关 vue点击展开更多，点击收起

<template> <div> <div class="menus"> <di

我不是女神ヾ/ 2022年03月21日 08:48/ 0 赞/ 492 阅读

相关点击显示和隐藏

<html> <head> <meta charset="UTF-8" /> <meta charset

梦里梦外;/ 2022年02月02日 02:31/ 0 赞/ 335 阅读

相关 vue 写点击展开及收起

<template> <div> <div> <p id="p">Lorem ipsum dolor sit amet,

小灰灰/ 2021年12月18日 22:21/ 0 赞/ 562 阅读

相关 vue 点击展开显示更多点击收起部分隐藏

vue 点击展开显示更多点击收起部分隐藏要求：只展示几条数据，其余的收起。点击显示更多时候，查看全部如下：以百度云的页面为例 ![在这里插入图片描述]

短命女/ 2021年09月13日 17:24/ 0 赞/ 822 阅读

相关 flutter 点击可展开收缩组件ExpansionTile(类似点击展开消息栏)

可展开组件 ExpansionTile( title:Text("不点击时显示"), leadi

ゞ浴缸里的玫瑰/ 2021年07月24日 22:14/ 0 赞/ 1331 阅读