在vue中动态添加class类进行显示隐藏实例


Posted in Javascript onNovember 09, 2019

如下所示:

<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>

通过点击按钮进行显示隐藏

在vue中动态添加class类进行显示隐藏实例

data() {
  return {
   flag: false,
  }
 },
 methods: {
  getdata() {
   this.$axios.post('http://yapi.xxxxxxx').then( res => {
    console.log(res)
   })
  },
  checkSite() {
   this.flag = !this.flag
  }
 }

三元表达式需要写在数组中 点击按钮的时候需要改变flag的状态 这里的flag相当于一个开关

在vue中动态添加class类进行显示隐藏实例

以上这篇在vue中动态添加class类进行显示隐藏实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
现如今最流行的JavaScript代码规范
Mar 08 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
Sep 28 Javascript
代码详解Vuejs响应式原理
Dec 20 Javascript
Vue动态获取width的方法
Aug 22 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
vue-resource:jsonp请求百度搜索的接口示例
Nov 09 #Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 #Javascript
解决vue组件中click事件失效的问题
Nov 09 #Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 09 #Javascript
Vue根据条件添加click事件的方式
Nov 09 #Javascript
浅谈vuex中store的命名空间
Nov 08 #Javascript
解决$store.getters调用不执行的问题
Nov 08 #Javascript
You might like
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
JS本地刷新返回上一页代码
2016/07/25 Javascript
自动化测试读写64位操作系统的注册表
2016/08/15 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
vue弹窗组件的实现示例代码
2018/09/10 Javascript
vue中格式化时间过滤器代码实例
2019/04/17 Javascript
浅谈React Native 传参的几种方式(小结)
2019/05/21 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
js+canvas绘制图形验证码
2020/09/21 Javascript
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
python 动态加载的实现方法
2017/12/22 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
python实现微信每日一句自动发送给喜欢的人
2019/04/29 Python
python通过http下载文件的方法详解
2019/07/26 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
C++和python实现阿姆斯特朗数字查找实例代码
2020/12/07 Python
使用 CSS3 中@media 实现网页自适应的示例代码
2020/03/24 HTML / CSS
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
FC-Moto英国:欧洲最大的摩托车服装和头盔商店之一
2019/08/25 全球购物
提高EJB性能都有哪些技巧
2012/03/25 面试题
体现团队精神的口号
2014/06/06 职场文书
在职证明书模板
2015/06/15 职场文书