在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 相关文章推荐
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
JavaScript使用FileReader实现图片上传预览效果
Mar 27 Javascript
30分钟快速实现小程序语音识别功能
Nov 27 Javascript
vue中过滤器filter的讲解
Jan 21 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 Javascript
vue项目接口域名动态获取操作
Aug 13 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
Function eregi is deprecated (解决方法)
2013/06/21 PHP
删除html标签得到纯文本可处理嵌套的标签
2014/04/28 PHP
PHP获取POST数据的几种方法汇总
2015/03/03 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
Cookie 小记
2010/04/01 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
javascript操作数组详解
2014/12/17 Javascript
easyui Droppable组件实现放置特效
2015/08/19 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
JS回调函数简单用法示例
2017/02/09 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
vue.js删除列表中的一行
2018/06/30 Javascript
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
JS闭包原理与应用经典示例
2018/12/20 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
使用 vue 实例更好的监听事件及vue实例的方法
2019/04/22 Javascript
Python全局变量用法实例分析
2016/07/19 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python文件和文件夹复制函数
2020/02/07 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
实习销售业务员自我鉴定
2013/09/21 职场文书
公司业务主管岗位职责
2013/12/07 职场文书
银行领导证婚词
2014/01/11 职场文书
档案保密承诺书
2014/06/03 职场文书
毕业生应聘求职信
2014/07/10 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
试用期自我评价范文
2015/03/10 职场文书
家长意见书
2015/06/04 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
选购到合适的激光打印机
2022/04/21 数码科技