一，来回切换样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.first {
color: pink;
}
.active {
color: red;
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<div class="first" :class="{'active': isActive}">我是一个div</div>
<button @click="isClick">点击</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
isActive: false
},
methods: {
isClick() {
this.isActive = !this.isActive;
}
}
})
</script>
</body>
</html>
二，Tab切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.active {
color: pink;
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item,index) in titles"
@click="tab(index)"
:class="{active: index == number}"
>{{item}}</li>
</ul>
<div v-for="(itemCon,index) in contents"
v-show="index == number"
>{{itemCon}}</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
titles: ["标题一", "标题二", "标题三"],
contents: ["内容一", "内容二", "内容三"],
number: 0 //默认选中项
},
methods: {
tab(index) {
console.log(index);
this.number = index;
}
}
})
</script>
</body>
</html>
tab切换按照上面的做法写一些小dom还是可以的，但在实际项目中contents中可不是简单的定义在data中的数据了，它可能是一些需要展示的页面！所以这个时候怎样做呢？
1.在要展示的页面div中绑定样式:class="[number == 0 ? 'show':'hiden']"；
2.show为自定义样式display: block，hiden同样为自定义样式display: none；
3.其它需要展示div中只需改为number == 1或2或3...；
4.具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.active {
color: pink;
}
.show {
display: block;
}
.hiden {
display: none;
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item,index) in titles"
@click="tab(index)"
:class="{active: index == number}"
>{{item}}</li>
</ul>
<div class="first"
:class="[number == 0 ? 'show':'hiden']"
>区块一</div>
<div class="first"
:class="[number == 1 ? 'show':'hiden']"
>区块二</div>
<div class="first"
:class="[number == 2 ? 'show':'hiden']"
>区块三</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
titles: ["标题一", "标题二", "标题三"],
number: 0 //默认选中项
},
methods: {
tab(index) {
console.log(index);
this.number = index;
}
}
})
</script>
</body>
</html>
