在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的eval()中使用函数的进一步讨论
Jul 26 Javascript
根据对象的某一属性进行排序的js代码(如:name,age)
Aug 10 Javascript
jquery 事件冒泡的介绍以及如何阻止事件冒泡
Dec 25 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
基于Bootstrap的Metronic框架实现页面链接收藏夹功能
Aug 29 Javascript
Angularjs手动解析表达式($parse)
Oct 12 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件
Aug 02 Javascript
Vant的安装和配合引入Vue.js项目里的方法步骤
Dec 05 Javascript
layui 对table中的数据进行转义的实例
Sep 12 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 session 预定义数组
2009/03/16 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
PHP里的$_GET数组介绍
2019/03/22 PHP
广告显示判断
2006/08/31 Javascript
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
jquery获取焦点和失去焦点事件代码
2013/04/21 Javascript
页面实时更新时间的JS实例代码
2013/12/18 Javascript
Extjs 4.x 得到form CheckBox 复选框的值
2014/05/04 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
js解决movebox移动问题
2016/03/29 Javascript
第三章之Bootstrap 表格与按钮功能
2016/04/25 Javascript
JS事件添加和移出的兼容写法示例
2016/06/20 Javascript
js 判断各种数据类型的简单方法(推荐)
2016/08/29 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
浅谈js函数三种定义方式 &amp; 四种调用方式 &amp; 调用顺序
2017/02/19 Javascript
angular json对象push到数组中的方法
2018/02/27 Javascript
详解javascript中的Error对象
2019/04/25 Javascript
详解小程序毫秒级倒计时(适用于拼团秒杀功能)
2019/05/05 Javascript
vue组件 keep-alive 和 transition 使用详解
2019/10/11 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
Python将多个list合并为1个list的方法
2018/06/27 Python
django框架模板中定义变量(set variable in django template)的方法分析
2019/06/24 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
压铸汽车模型收藏家:Diecastmodelswholesale.com
2016/12/21 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
校长岗位职责
2013/11/26 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
测控技术与通信工程毕业生自荐信范文
2013/12/28 职场文书
中专生职业生涯规划书范文
2013/12/29 职场文书
党员思想汇报范文
2013/12/30 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书