在vue中动态添加class类进行显示隐藏实例
作者:树沙& 时间:2024-05-09 15:13:28
如下所示:
<div class="status_button">
<el-button type="success" @click="checkSite" >查岗</el-button>
<el-button type="danger">视频</el-button>
</div>
<!-- 查岗部分显示影藏 -->
<div class="check_button" :class="[this.flag?'show':'hidden']">
<ul class="cl">
<li>用xinhic</li>
<li>xin231</li>
</ul>
</div>
通过点击按钮进行显示隐藏
data() {
return {
flag: false,
}
},
methods: {
getdata() {
this.$axios.post('http://yapi.xxxxxxx').then( res => {
console.log(res)
})
},
checkSite() {
this.flag = !this.flag
}
}
三元表达式需要写在数组中 点击按钮的时候需要改变flag的状态 这里的flag相当于一个开关
来源:https://blog.csdn.net/hailangtuteng/article/details/80804032
标签:vue,class类,显示,隐藏
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
微信公众平台网页授权获取用户基本信息中授权回调域名设置的变动
2023-11-14 14:01:31
![](https://img.aspxhome.com/file/2023/3/88293_0s.jpg)
vue项目中禁用浏览器缓存配置案例
2024-06-07 16:01:26
![](https://img.aspxhome.com/file/2023/7/121977_0s.png)
如何利用PyQt5制作一个简单的登录界面
2023-11-18 20:36:31
![](https://img.aspxhome.com/file/2023/2/93532_0s.jpg)
Go语言的type func()用法详解
2024-02-21 12:50:51
使用AJAX技术的十大理由
2008-04-30 13:21:00
MySQL无法存储Emoji表情问题的解决方法分析
2024-01-22 00:32:13
![](https://img.aspxhome.com/file/2023/5/112875_0s.png)
Django {{ MEDIA_URL }}无法显示图片的解决方式
2023-06-20 07:42:22
python把一个字符串切开的实例方法
2022-07-10 21:52:17
实现MySQL回滚的Python脚本的编写教程
2024-01-16 05:41:29
numpy中的norm()函数求范数实例
2022-01-02 01:36:45
![](https://img.aspxhome.com/file/2023/8/73008_0s.png)
这些CSS Selector,你都熟悉吗?
2008-12-21 16:30:00
解决编码问题:UnicodeDecodeError: 'utf-8' codec can't decod
2023-03-25 02:45:59
![](https://img.aspxhome.com/file/2023/8/103148_0s.png)
Python适配器模式代码实现解析
2023-04-15 12:58:14
TensorFlow2.4完成Word2vec词嵌入训练方法详解
2023-10-17 03:23:14
Python关于print的操作(倒计时、转圈显示、进度条)
2022-08-19 07:26:58
![](https://img.aspxhome.com/file/2023/2/66282_0s.gif)
pytorch中retain_graph==True的作用说明
2021-08-03 09:15:26
Golang pipe在不同场景下远程交互
2024-05-09 09:45:58
javascript常用的方法整理
2023-08-23 10:57:13
15行Python代码实现免费发送手机短信推送消息功能
2023-11-01 10:20:51
![](https://img.aspxhome.com/file/2023/7/97187_0s.jpg)
如何在django中实现分页功能
2021-10-21 03:29:49
![](https://img.aspxhome.com/file/2023/9/86319_0s.png)