vue组件开发之tab切换组件使用详解

本文实例为大家分享了vue组件开发之tab切换组件的具体使用代码，供大家参考，具体内容如下

代码：

<template> <div class=”tab-slider”> <div class=”tab”> <span v-for=”(item, index) in items” v-bind:class=”{active: actived == index}” @click=”toggle(index)”>{{item.tab}}</span> </div> <div class=”tab-content”> <div class=”wrapbox clearboth”> <div class=”item” v-for=”(item, index) in items”>{{item.tabContent}}</div> </div> </div> </div></template><script> export default { name: ’tabSlider’, data (){ return { actived: 0, items: [{ ’tab’: ’tab1’, ’tabContent’: ’content1’ },{ ’tab’: ’tab2’, ’tabContent’: ’content2’ },{ ’tab’: ’tab3’, ’tabContent’: ’content3’ },{ ’tab’: ’tab4’, ’tabContent’: ’content4’ }] } }, methods: { //获取图片base64实现预览 toggle(index){ this.actived = index; document.querySelector(“.tab-content .wrapbox”).style.webkitTransform = “translateX(-” + (this.actived * 400) + “px)”; } } }</script><style scoped> *{margin:0 auto;padding:0;font-family:”微软雅黑”;} .clearboth::after{ content:””; display:block; clear:both; } .tab-slider{ height:auto; width:400px; margin:50px auto; } .tab-slider .tab{ display:flex; height:40px; line-height:40px; background:#ccc; } .tab-slider .tab span{ display:block; width:100%; text-align:center; cursor:default; } .tab-slider .tab .active{ background:red; } .tab-slider .tab-content{ height:300px; width:400px; overflow:hidden; } .tab-slider .tab-content .item{ float:left; height:300px; width:400px; line-height:300px; text-align:center; font-size:60px; background:#eee; } .tab-slider .wrapbox{ width:2000px; transition: all 1s; }</style>

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

如何使用Vue.js组件tabs实现选项卡切换效果

3个子组件代码参考分别为：<tab1></tab1><tab2></tab2><tab3></tab3>js里面用局部组件引入这三个子组件//数据里面data (){ return { a:’tab1′ //默认显示tab1子组件 }}components:{ ‘tab1’:tab1, ‘tab2’:tab2, ‘tab3’:tab3}

vue tab切换怎么在父组件中调用指定切换内容的子组件的方法

子组件：
<template>  <div>    childComponent  </div></template> <script>  export default {    name: “child”,    methods: {      childClick(e) {        console.log(e)      }    }  }</script>
父组件：
<template>  <div>    <button @click=”parentClick”>点击</button>    <Child ref=”mychild” />   //使用组件标签  </div></template> <script>  import Child from ‘./child’;   //引入子组件Child  export default {    name: “parent”,    components: {      Child    // 将组件隐射为标签    },    methods: {      parentClick() {        this.$refs.mychild.childClick(“我是子组件里面的方法哦”);  // 调用子组件的方法childClick      }    }  }</script>
至于tab切换，只不过是 v-if 或者v-show
请采纳

Vue+ElementUI实现tab选卡式后台Admin

在以往管理系统开发，相对比较大型的后台都会做成tab选卡式、即左边手风琴列表导航菜单，右边一个tab选卡容器。点击左边的菜单在右边打开一个选卡，选卡中内容是独立的，选卡可以任意切换和关闭。

vue 组件el-tabs 切换实时更新问题

Vue

Vue组件的使用

通过ref来获取页面上的dom 若在一个组件<item>中添加上ref，那么获取到的dom就是对应的组件，也就是可以获取到组件的引用。 可以获取到组件中定义的data数据 父组件传值给子组件通过属性来传。

微信小程序实现tab切换

微信小程序使用的是类似MVVM类型的框架，本质是数据驱动视图，换句话来说就是逻辑层（javascript）去驱动界面层（view）的改变，功能实现核心主要在于操作数据。 下面来详细讲解，微信小程序如何实现tab切换功能，如下图所示： 在wxml文件里面，搭建结构。

把切换按钮btns和内容cons渲染出来。在js文件里面书写数据，并且在wxml文件里面通过wx:for进行列表渲染输出。 通过弹性布局去书写样式。添加cur当前类名去控制当前按钮的样式和当前显示的内容盒子。

注意微信小程序使用的是rpx可以自适应的单位，规定所有屏幕宽度为750rpx，在iPhone6设备屏幕宽度换算是2rpx=1px。 逻辑层添加了active数据控制当前显示盒子。 wxml要书写判断验证去控制盒子是否有cur类名。

上面表达式表示，如果当前项的索引值index等于数据active，则此项有cur这个类名，否则就没有。注意cur类名是控制当前按钮样式和当前显示内容盒子的。 有cur这个类名的按钮会显示当前的样式，有cur这个类名的内容盒子是显示的，但是否有这个类名是通过active这个数据决定的。

所以最后我们只需要把active这个数据的值修改成用户点击按钮的索引值即可实现tab切换功能。 首先要给按钮btn自定义索引值等于循环当前项的index，微信小程序给组件自定义索引值是通过在组件身上添加data-index=”{{index}}”属性，然后在js里面即可通过事件对象里面的e.currentTarget.dataset.index属性获取用户点击按钮的索引值。 给按钮自定义索引值和绑定事件，绑定点击事件通过给按钮组件添加属性bindtap=“函数名”，此处设置函数名为toggle。

把active的值设置为用户点击按钮的索引值，即可实现tab切换功能。 e.currentTarget.dataset.index获取用户点击按钮的索引值，微信小程序通过this.setData()去修改data里面的数据内容。