ElementUI 点击展开/隐藏

发布时间:2021-02-26 13:33:54编辑:admin阅读(273)

    一、概述

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

     

    二、项目演示

    新建一个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>


     

    访问测试页面

    1.png

     

    反复点击按钮,效果如下:

    1.gif

     


关键字