vue选项卡
2019-06-17 本文已影响0人
Wo信你个鬼
切换内容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#app{
width: 220px;
height: 200px;
background: aqua;
/*margin: 50px auto;*/
}
ul{
position: fixed;
}
li{
list-style: none;
float: left;
margin-right: 34px;
width: 50px;
height: 30px;
background: red;
text-align: center;
line-height: 30px;
}
.content>div{
width: 100px;
height: 50px;
position: absolute;
top: 35px;
left: 0px;
width: 216px;
height: 160px;
border: 1px solid red;
text-align: center;
line-height: 169px;
}
.active{
background: green;
}
.bgg{
background: red;
}
</style>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item,index) in list"
:class="{'active':curIndex===index}"
v-on:click="setindex(index)">
<!--文本的插值-->
<span>
{{item.title}}
</span>
</li>
</ul>
<div class="content">
<div v-for="(item,index) in list"
v-show="curIndex===index">
<p>{{item.content}}</p>
</div>
</div>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<!--需要一个属性curIndex，记录当前显示的下标-->
<script type="text/javascript">
var app = new Vue({
el:"#app",
methods:{
setindex(i){
this.curIndex=i;
// console.log(i);
}
},
data:{
curIndex:0,
list:[
{id:1,title:"选项1",content:"内容1"},
{id:2,title:"选项2",content:"内容2"},
{id:3,title:"选项3",content:"内容3"}
]
}
});
</script>
</body>
</html>
动态组件
<template>
<div class="appointment">
<swiper :carouselArr="imgArr"></swiper>
<div class="tab">
<div class="title">
<button :class="idx==0?active:''" @click="cutTab(0)">景点进去</button>
<button :class="idx==1?active:''" @click="cutTab(1)">酒店住宿</button>
<button :class="idx==2?active:''" @click="cutTab(2)">美食餐饮</button>
</div>
<!--动态组件-->
<components :is="arr[idx]"></components>
</div>
</div>
</template>
<script>
import swiper from '@/components/swiper.vue'
import img1 from "@/assets/img/our1.jpg"
import img2 from "@/assets/img/our3.jpg"
import scenic from '@/components/appointment/Scenic.vue'
import hotel from '@/components/appointment/Hotel.vue'
import food from '@/components/appointment/food.vue'
export default {
name:"appoint",
components:{
swiper,
scenic,
hotel,
food
},
data(){
return {
imgArr:[
img1,
img2
],
arr:["scenic","hotel","food"],
idx:0,
active:"active"
}
},
methods:{
cutTab(idx){//切换动态组件
this.idx = idx;
}
}
}
</script>
<style lang="scss">
.tab{
max-width: 1200px;
margin: 30px auto;
.title{
button{
width: 33.33%;
height: 83px;
background: #666;
font-size: 24px;
color: #fff;
}
.active{
background: #c3c3c3;
}
}
}
</style>
