ElementUI 點擊展開/隱藏

一、概述

在項目，需要使用一個功能，點擊某個按鈕，展開/隱藏 某些說明文字。

 

二、項目演示

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

 

訪問測試頁面

 

反復點擊按鈕，效果如下：