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 相关文章推荐
6款新颖的jQuery和CSS3进度条插件推荐
Mar 05 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
Node.js巧妙实现Web应用代码热更新
Oct 22 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
js 获取站点应用名的简单实例
Aug 18 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
Dec 11 jQuery
一个因@click.stop引发的bug的解决
Jan 08 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
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学习 变量使用总结
2011/03/24 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
php实现redis数据库指定库号迁移的方法
2015/01/14 PHP
php创建多级目录的方法
2015/03/24 PHP
php简单实现短网址(短链)还原的方法(测试可用)
2016/05/09 PHP
php+ajax实现商品对比功能示例
2019/04/13 PHP
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
关于jQuery中的end()使用方法
2011/07/10 Javascript
jquery中ajax学习笔记3
2011/10/16 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
$.each遍历对象、数组的属性值并进行处理
2014/07/18 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
json的使用小结
2016/06/08 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
Bootstrap学习笔记 轮播(Carousel)插件
2017/03/21 Javascript
JavaScript用二分法查找数据的实例代码
2017/06/17 Javascript
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
vue项目环境变量配置的实现方法
2018/10/12 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
用tensorflow构建线性回归模型的示例代码
2018/03/05 Python
python 定义类时,实现内部方法的互相调用
2019/12/25 Python
python转化excel数字日期为标准日期操作
2020/07/14 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
Zadig&Voltaire官网:法国时装品牌
2018/01/05 全球购物
应届生护士求职信
2013/11/01 职场文书
个人借款担保书
2014/04/02 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书