{{item}}
import tab1 from '@/components/common/tab1.vue'
import tab2 from '@/components/common/tab2.vue'
import tab3 from '@/components/common/tab3.vue'
export default {
components: {
tab1,tab2,tab3
},
data(){
return{
tabList:['tab1','tab2','tab3'],
nowIndex:0,
isShow:false
}
},
methods:{
toggleTab(index){
this.nowIndex = index
}
}
}
.all{
width: 600px;
margin: auto;
}
ul{
height: 60px;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
border:1px solid #ccc;
border-bottom:none;
}
li{
width: 33.1%;
height: 60px;
float: left;
border-right: 1px solid #ccc;
}
.content{
width: 600px;
height:300px;
}
.con{
width: 600px;
height:300px;
border: 1px solid #ccc;
}

第一种 比较灵活简单的方式(切换改变部分的内容在组件中比较方便操作)
{{tab.type}}
name:'app',
data(){return{
active:0,
currentView:'tab1',
tabs:[
{
type:'tab1',
view:'tab1'},
{
type:'tab2',
view:'tab2'}
]
}
},
methods:{
toggle(i,v){this.active=i;this.currentView=v;
}
},
components:{
tab1,
tab2
}
}
font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;/*text-align: center;
color: #2c3e50;
margin-top: 60px;*/}
ul{
width:200px;
display:flex;
}
ul li{
width:100px;
height:40px;
background: #ccc;
display: inline-flex;
border-right:1px solid #ddd;
justify-content: center;
align-items: center;
cursor:pointer
}
ul li.active{
background:#333;
}
第二种(比较死板，内容被固定住了)
{{tab}}
{{tabCon}}
/*import tab1 from './components/tabs/tab1.vue'
import tab2 from './components/tabs/tab2.vue'*/
export default {
name: 'app',
data(){
return {
tabs:['按钮1','按钮2'],
tabsCon:['内容1','内容2'],
num:0
}
},
methods:{
table(index) {
this.num = index;
}
}
/* components:{
tab1,
tab2
}*/
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center;
color: #2c3e50;
margin-top: 60px; */
}
ul{
width:200px;
display:flex;
}
ul li{
width:100px;
height:40px;
background: #ccc;
display: inline-flex;
border-right:1px solid #ddd;
justify-content: center;
align-items: center;
cursor:pointer;
}
ul li.active{
background:#333;
}
第三种(比较死板，内容被固定住了，使用过jquery的人习惯用的方式)
{{value.title}}
{{value.content}}
/*import tab1 from './components/tabs/tab1.vue'
import tab2 from './components/tabs/tab2.vue'*/
export default {
name: 'app',
data(){
return {
tab: [{
title: 'tab1',
content: 'this is tab1',
isactive: true
}, {
title: 'tab2',
content: 'this is tab2',
isactive: false
}]
}
},
methods: {
change(index){
this.tab.forEach(function(v){
v.isactive=false
})
this.tab[index].isactive=true
}
}
}
*{
padding:0;
margin:0;
box-sizing:border-box;
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center;
color: #2c3e50;
margin-top: 60px; */
width:100%;
}
.nav-tab{
width:100%;
height: 30px;
line-height:30px;
display:flex;
justify-content: space-around;
}
.nav-tab a{
flex:1;
text-align: center;
background:#ccc;
border-right:1px solid #ddd;
cursor:pointer;
}
.nav-tab a.active{
border-bottom:1px solid red;
}
.tabs .tab{
display: none;
}
.tabs .tab.active{
display:block;
}

需要弄类似tab切换的功能就是一个点击切换上一页下一页的页面 找到这个获得灵感
Tabs
.active{
background: #eee;
}
.tabs{
width: 200px;
height: 20px;
font:0;
padding:0;
}
.li-tab{
width: 50%;
height: 100%;
display:inline-block;
text-align: center;
}
.divTab{
width: 200px;height: 300px;
}
@click="toggleTabs(index)"
:class="{active:index!=nowIndex}">{{item}}
我是tab1
我是tab2
var app=new Vue({
el:'#app',
data:{
tabsParam:['tab1','tab2'],//(这个也可以用对象key，value来实现)
nowIndex:0,//默认第一个tab为激活状态
},
methods:{
toggleTabs:function(index){
this.nowIndex=index;
},
}
})
实现效果如下：
感谢原作者

团队开发中经常遇到需要使用eslint 语法纠正的情况；
错误提示： expected indentation of 2 spaces but found 1 tab
但是 tab 和 space 提示真的很头疼，可以通过下面方式解决
找到vue 项目中的 .eslintrc.js , 在rules 中 添加
'no-tabs': 0,
'no-mixed-spaces-and-tabs': 0,
'indent': ["off", "tab"],
'no-trailing-spaces': 0,
1
2
3
4
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parser: 'babel-eslint',
parserOptions: {
sourceType: 'module'
},
env: {
browser: true,
},
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
extends: 'standard',
// required to lint *.vue files
plugins: [
'html'
],
// add your custom rules here
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'no-tabs': 0,
'no-mixed-spaces-and-tabs': 0,
'indent': ["off", "tab"],
'no-unused-vars': 0,
'no-trailing-spaces': 0,
"eqeqeq": 0
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
更多的eslint 规则可以参考官网 => http://eslint.cn/docs/rules/
---------------------
作者：Aimee芊
来源：CSDN
原文：https://blog.csdn.net/aimee1608/article/details/81045362
版权声明：本文为博主原创文章，转载请附上博文链接！