在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 相关文章推荐
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
浅谈JS使用[ ]来访问对象属性
Sep 21 Javascript
js实现文字选中分享功能
Jan 25 Javascript
JS中touchstart事件与click事件冲突的解决方法
Mar 12 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
微信小程序实现锚点功能
Nov 20 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
vue使用element-ui按需引入
May 20 Vue.js
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之第五天
2006/10/09 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
Thinkphp 空操作、空控制器、命名空间(详解)
2017/05/05 PHP
用函数式编程技术编写优美的 JavaScript
2006/11/25 Javascript
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
JavaScript框架(iframe)操作总结
2014/04/16 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
Javascript遍历Html Table示例(包括内容和属性值)
2014/07/08 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
JavaScript实现输入框与清空按钮联动效果
2016/09/09 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
深入理解Node中的buffer模块
2017/06/03 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
详解Web使用webpack构建前端项目
2017/09/23 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
JS删除String里某个字符的方法
2021/01/06 Javascript
微信小程序实现下拉框功能
2019/07/16 Javascript
Vue 实现简易多行滚动&quot;弹幕&quot;效果
2020/01/02 Javascript
Vue 中如何将函数作为 props 传递给组件的实现代码
2020/05/12 Javascript
[00:35]DOTA2上海特级锦标赛 VP战队宣传片
2016/03/04 DOTA
python实现多线程的两种方式
2016/05/22 Python
对python 多线程中的守护线程与join的用法详解
2019/02/18 Python
学校七一活动方案
2014/01/19 职场文书
超市促销活动方案
2014/03/05 职场文书
工伤赔偿协议书
2014/04/15 职场文书
霸气队列口号
2014/06/18 职场文书
咖啡店创业计划书
2014/08/15 职场文书
编写python程序的90条建议
2021/04/14 Python
Python还能这么玩之用Python做个小游戏的外挂
2021/06/04 Python