发布时间:2021-02-26 13:33:54编辑:admin阅读(3750)
在项目,需要使用一个功能,点击某个按钮,展开/隐藏 某些说明文字。
新建一个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>
访问测试页面
反复点击按钮,效果如下:
下一篇: vue+django实现下载文件
49836
49067
39749
36795
31191
28030
26986
21793
21712
20063
79°
180°
797°
1418°
1333°
1166°
2365°
1412°
2031°
2259°