Vue.js tab实现选项卡切换
本文为大家分享了Vuejs 组件化开发tab组件实例，供大家参考，具体内容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/index.css" rel="external nofollow" >
<script type="text/javascript" src="../lib/vue.min.js"></script>
<script type="text/javascript" src="../lib/jquery-1.11.3.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#tabPanel .itemname {
height: 40px;
width: 180px;
margin-bottom: 10px;
}
#tabPanel .itemcontent {
height: 40px;
width: 180px;
}
#tabPanel .addbtn {
margin: 10px 0 0 95px;
width: 185px;
height: 40px;
}
#tabPanel .active {
background: #eee;
}
#tabPanel {
height: 340px;
width: 500px;
margin: 100px auto;
}
#tabPanel .tab {
height: 40px;
background: #ccc;
margin-top: 10px;
}
#tabPanel .tab ul li {
list-style: none;
float: left;
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
}
#tabPanel .content {
height: 300px;
width: 500px;
background: #eee;
}
</style>
</head>
<body>
<div id="tabItem">
<my-tab></my-tab>
<my-tab></my-tab>
</div>
<!--组件模板-->
<script type="text/template" id="tab">
<div id="tabPanel">
<label>添加滑块名称：<input type="text" v-model="tabItem" class="itemname"></label><br>
<label>添加滑块内容：<input type="text" v-model="tabContent" class="itemcontent"></label><br>
<input type="button" value="添加选项" @click="addItem()" class="addbtn">
<div class="tab">
<ul>
<li v-for="(value, index) in tabs" v-bind:class="{active: index == num }" @mouseover="toggle(index)" @dblclick="del(index)">{{value}}</li>
</ul>
</div>
<div class="content">
<div class="box" v-for="(value, index) in tabContents" v-show="index == num" contenteditable="true" @blur="editContent(index,value)">{{value+index}}</div>
</div>
</div>
</script>
<!--组件模板-->
</body>
</html>
<script>
var vue = new Vue({
el: "#tabItem",
data: {
},
components: {
'my-tab': {
template: '#tab',
data: function() {
return {
tabs: ["第一项", "第二项"],
tabContents: ["第一项内容", "第二项内容"],
num: 0,
tabItem: "",
tabContent: ""
}
},
methods: {
//切换滑块
toggle: function(index) {
this.num = index;
},
//添加滑块
addItem: function() {
if (this.tabItem == "" || this.tabContent == "") {
alert("填写完整的名称和内容");
} else {
this.tabs.push(this.tabItem);
this.tabContents.push(this.tabContent);
}
},
//双击删除滑块
del: function(index) {
this.tabs.splice(index, 1);
this.tabContents.splice(index, 1)
},
//编辑选项内容
editContent: function(index, value) {
this.tabContents[index] = value;
console.log(this.tabContents);
}
}
}
}
});
</script>
如果大家还想深入学习，可以点击两个精彩的专题：javascript选项卡操作方法汇总 jquery选项卡操作方法汇总
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于Vue实现tab栏切换内容不断实时刷新数据功能
先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l
-
详解使用vue实现tab 切换操作
在使用jQuery类库实现tab功能时,是获取鼠标在mousenter或click时的index值,然后切换到当前的标题和内容,把其他的标题和内容的状态去掉: $('.tab .title').find('.item') .removeClass('current').eq(index).addClass('current'); // 为index位置的title添加current $('.tab .content').find('.item') .hide().eq(index).show()
-
详解vue2.0 使用动态组件实现 Tab 标签页切换效果（vue-cli）
在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些. 先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件. 效果预览 关键代码及分析如下: <template> // 每一个 tab 绑定了一个点击事件,传入的参数对应着
-
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{padding: 0;margin:
-
vue仿淘宝订单状态的tab切换效果
前几天刚开始使用vue 做项目,然后自己就在项目中摸索写了一个tab切换的小dome,仿淘宝订单状态的tab切换. HTML 代码: <div class="navigation"> //这里是通过循环遍历出来的数据,你需要根据index的值来判断你现在点击的是第几个tab栏导航,同时在js中写一个navChange的方法来把index 传递到就js中来改变tabIndex(这是在初始化时设置的默认index)的值 <span v-for="(item, i
-
Vue2.0 多 Tab切换组件的封装实例
Vue2.0 多 Tab切换组件简单封装,满足自己简单的功能,可以直接拿去使用! 首先上效果图: 功能简单介绍: 1.支持tab切换 2.支持tab定位 3.支持tab自动化 仿React多Tab实现,总之可以正常使用满足日常需求, 1.使用方法: ==index.vue文件== <TabItems> <div name="买入" class="first"> <Content :isContTab = "0" /&
-
Vue.js组件tabs实现选项卡切换效果
今天给大家分享一个小颖自己写的vue组件,因为小颖也才接触vue没多久,如果有什么不足的地方,希望大家提出来,小颖加以改正.以下就是具体如何实现tabs啦. 调用示例: <template> <div class="tabs-contents"> <!-- 调用tabs组件 --> <tabs :flag.sync='tabsShowFlag' :navtitle='navTitle' :navdata='navData'> <di
-
Vue.js tab实现选项卡切换
本文为大家分享了Vuejs 组件化开发tab组件实例,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/index.css" rel=&quo
-
Vue.js组件实现选项卡以及切换特效
Vue.js组件实现选项卡以及切换动画特效,供大家参考,具体内容如下 最近在学习Vue,当看梁灏大神写的<Vue.js实战>时看到了关于用组件实现选项卡功能,我也根据课后的练习加上自己的理解重新编写了一下. 组件分为pane.js和tabs.js两个部分,话不多说,直接上代码. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l
-
vue动态组件实现选项卡切换效果
本文实例为大家分享了vue动态组件实现选项卡切换的具体代码,供大家参考,具体内容如下 导航按钮: <div class="tab-title"> <p @click="a='tab1'"><router-link to='/collectnewcars'>新车</router-link><em></em></p> <p @click="a='tab2'"&g
-
Vue.js路由实现选项卡简单实例
本文实例为大家分享了Vue.js路由实现选项卡的具体代码,供大家参考,具体内容如下 需要实现下图效果,点击上方选项卡,切换到不同内容的组件: 事先准备好两个库文件(vue.js.vue-router.js),放到对应路径. 1.引入依赖库 <script src="vue.js" type="text/javascript" charset="GBK"></script> <script src="vue-
-
vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个单选按钮的兄弟节点,再用绝对定位把单选按钮定位在三个button上面,这样就可以用:checked伪类来单选按钮的兄弟元素,即对应的不同的层,我简单的写了一下DOM结构,大概就是这样: 那么用vue.js实现上述的效果,其实也有两种途径,一种使用vue-router,vue-router是vue.j
-
vue.js实现左边导航切换右边内容
本文实例为大家分享了vue.js左边导航切换右边内容的具体代码,供大家参考,具体内容如下 <template> <div class="layout-container"> <y-header> <div slot="nav"></div> </y-header> <div class="w"> <div class="content"&
-
JS制作类似选项卡切换的年历
本文实例为大家分享了用JS制作简易的可切换的年历,类似于选项卡,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ background-color: green; border-radius: 20px; pad
-
JS制作可以选项卡切换的年历
本文实例为大家分享了用JS制作简易的可切换的年历,类似于选项卡,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ background-color: green; border-radius: 20px; pad
-
JS实现多重选项卡切换轮播图
轮播动画来提升页面的颜值和交互性能,下面我们将一起学习利用html , css和Javascript等前端开发基础知识来制作一个简单的轮播图. 轮播图简介:在一个网站的某一特定模块,通过电脑上鼠标点击或鼠标移入.手机上手指滑动后,可以分别展示不同的图片,这个模块就叫做轮播模块. (做的不好的地方欢迎各位大佬批评指正,感觉有帮助的同学麻烦给颗星星哦~) html布局部分: <div id="box"> <div class="scenery pic"