vue同个按钮控制展开和折叠同个事件操作


Posted in Javascript onJuly 29, 2020

我就废话不多说了,大家还是直接看代码吧~

<el-button :icon="!moreshow?'el-icon-arrow-down':'el-icon-arrow-up'" @click="getmoreshow">{{!moreshow?更多:隐藏}}</el-button>

data() {
  return {
  moreshow:false,
  count:1,
  }
}
mounted() {
  this.getmoreshow()//避免点击两次才生效
},
methods: {
  getmoreshow(){
  if(this.count%2==0){
   this.moreshow=true
  }else{
   this.moreshow=false
  }
  this.count++
  },
}

补充知识:vue 可折叠面板的工作区组件

这个组件中使用了elementui的两个图标

组件Js:

Vue.component('work-container', {
  props: ['height'],
  data: function () {
    return {
      isCollapse: false
    }
  },
  computed: {
    topbarcssobj: function () {
      var obj = { padding: '3px' };
      if (this.isCollapse) {
        obj.display = 'none';
      }
      else {
        obj.display = 'block';
        if (this.height) {
          obj.height = this.height + 'px';
        } else {
          obj.height = '40px';
        }
      }
      return obj;
    },
    btniconcssobj: function () {
      return this.isCollapse ? 'el-icon-caret-bottom' : 'el-icon-caret-top';
    },
    strview: function () {
      return this.isCollapse ? '显示' : '隐藏';
    }
  },
  methods: {
    togglebar: function () {
      this.isCollapse = !this.isCollapse;
    }
  },
  template: '<el-container>\
          <el-header v-bind:style="topbarcssobj">\
          <slot name="tbar"></slot>\
          </el-header>\
          <el-main>\
          <div style="margin:3px;">\
            <div style="float:left;margin-right:10px;cursor:pointer;color: #d3dce6;display:none;" v-on:click="togglebar">\
              <i v-bind:class="btniconcssobj">{{strview}}查询条件</i>\
            </div>\
            <div>\
            <slot name="btn"></slot>\
            </div>\
          </div>\
          <div>\
            <slot name="work"></slot>\
          </div>\
          </el-main>\
         </el-container>'
});

调用:

<script src="~/Scripts/vue/workcontainer.js"></script>

 <work-container v-bind:height="80">
    <template v-slot:tbar>
      <spec-combo v-on:selectspec="setSpec"></spec-combo>
      <ban-input v-on:selectban="setBan"></ban-input>
      <grade-input v-on:selectban="setGrade"></grade-input>

    </template>
    <template v-slot:work>
      {{spec}}
      {{ban}}
      {{grade}}
    </template>
  </work-container>

以上这篇vue同个按钮控制展开和折叠同个事件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS分页效果示例
Oct 11 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
JS获取指定月份的天数两种实现方法
Jun 22 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
JS原型与继承操作示例
May 09 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 Javascript
JS获取表格视图所选行号的ids过程解析
Feb 21 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
JavaScript编写开发动态时钟
Jul 29 #Javascript
js编写简易的计算器
Jul 29 #Javascript
从0到1学习JavaScript编写贪吃蛇游戏
Jul 28 #Javascript
javascript如何使用函数random来实现课堂随机点名方法详解
Jul 28 #Javascript
Node.js 深度调试方法解析
Jul 28 #Javascript
vue-列表下详情的展开与折叠案例
Jul 28 #Javascript
js 数组当前行添加数据方法详解
Jul 28 #Javascript
You might like
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
谈PHP生成静态页面分析 模板+缓存+写文件
2009/08/17 PHP
PHP禁止页面缓存的代码
2011/10/23 PHP
利用PHP实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
WordPress中注册菜单与调用菜单的方法详解
2015/12/18 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
javascript比较文档位置
2008/04/08 Javascript
Javascript 继承机制的实现
2009/08/12 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
由JavaScript中call()方法引发的对面向对象继承机制call的思考
2011/09/12 Javascript
javascript利用控件对windows的操作实现原理与应用
2012/12/23 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
jquery数组之存放checkbox全选值示例代码
2013/12/20 Javascript
js分页代码分享
2014/04/28 Javascript
JavaScript给按钮绑定点击事件(onclick)的方法
2015/04/07 Javascript
js微信扫描二维码登录网站技术原理
2016/12/01 Javascript
JavaScript严格模式详解
2017/01/16 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
Bootstrap datepicker日期选择器插件使用详解
2017/07/26 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
[02:08:58]2014 DOTA2国际邀请赛中国区预选赛 Ne VS CIS
2014/05/22 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
在keras里实现自定义上采样层
2020/06/28 Python
python使用requests库爬取拉勾网招聘信息的实现
2020/11/20 Python
倩碧美国官网:Clinique美国
2016/07/20 全球购物
英文简历自荐信范文
2013/12/11 职场文书
大专毕业自我鉴定
2014/02/04 职场文书
小学班主任评语
2014/12/29 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
2015年简历自我评价范文
2015/03/11 职场文书