码迷,mamicode.com
首页 > 其他好文 > 详细

ElementUI 点击展开/隐藏

时间:2021-02-08 12:11:26      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:temp   load   port   图片   com   项目   lap   back   alt   

一、概述

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

 

二、项目演示

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

 

访问测试页面

技术图片

 

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

技术图片

 

ElementUI 点击展开/隐藏

标签:temp   load   port   图片   com   项目   lap   back   alt   

原文地址:https://www.cnblogs.com/xiao987334176/p/14361911.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!