一、概述
在项目,需要使用一个功能,点击某个按钮,展开/隐藏 某些说明文字。
二、项目演示
新建一个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>
访问测试页面
反复点击按钮,效果如下: