vue/cli的学习五 样式切换和选项卡 动态组件

1:设置页面结构  点谁谁变黄色

<div class="nav-content">
        <div class="nav-item" :class="{selected:selectedIndex==1}" @click="changeIndex(1)">正在热映</div>
         <div class="nav-item" :class="{selected:selectedIndex!=1}" @click="changeIndex(2)">即将上映</div>
      </div>

2:页面样式

.nav{
    width: 100%;
    height: 80px;
  }
  .nav-title{
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
  }
  .nav-content{
    width: 100%;
    height: 40px;
    display: flex;
  }
  .nav-item{
    flex:1;
    text-align: center;
    line-height: 40px;
  }
  .nav-item.selected{
    color:#ff5f16;
  }

3:数据和事件 点击以后更新selectedIndex

export default {
  data(){
    return  {
      selectedIndex:1,
      bannerList:[],//轮播图的数据
    }
  },
  methods:{
    changeIndex(index){
      this.selectedIndex = index;
    }
  },

4:效果  选项卡的效果

 

5:加上组件的显示  在components的home中新建两个子组件  ComingSoon.vue和NowPlaying.vue

里面分别写上代码

<template>
    <div>
        正在热映
    </div>
</template>
<template>
    <div>
        即将上映
    </div>
</template>

6:在需要使用的页面 引入子组件和注册

import comingsoon from "../components/home/ComingSoon";
import nowplaying from "../components/home/NowPlaying";

components: {
    comingsoon,
    nowplaying,
  },

7:如果是动态组件 就是用component 和is

   <component :is="com"></component>


 data() {
    return {
      com: "nowplaying",
      selectedIndex: 1,
      bannerList: [], //轮播图的数据
    };
  },

8:补充事件

methods: {
    changeIndex(index) {
      this.selectedIndex = index;
      if (index == 1) {
        //千万别写=
        this.com = "nowplaying";
      } else {
        this.com = "comingsoon";
      }
    },
  },
<template>
  <div class="home">
    <swiper :bannerlist="bannerList"></swiper>
    <div class="nav">
      <div class="nav-title">电影</div>
      <div class="nav-content">
        <div
          class="nav-item"
          :class="{ selected: selectedIndex == 1 }"
          @click="changeIndex(1)"
        >
          正在热映
        </div>
        <div
          class="nav-item"
          :class="{ selected: selectedIndex != 1 }"
          @click="changeIndex(2)"
        >
          即将上映
        </div>
      </div>
    </div>
    <div class="content">
      <component :is="com"></component>
    </div>
  </div>
</template>
<style scoped>
.nav {
  width: 100%;
  height: 80px;
}
.nav-title {
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
.nav-content {
  width: 100%;
  height: 40px;
  display: flex;
}
.nav-item {
  flex: 1;
  text-align: center;
  line-height: 40px;
}
.nav-item.selected {
  color: #ff5f16;
}
</style>
<script>
import axios from "axios";
import swiper from "../components/home/Swiper";
import comingsoon from "../components/home/ComingSoon";
import nowplaying from "../components/home/NowPlaying";
export default {
  data() {
    return {
      com: "nowplaying",
      selectedIndex: 1,
      bannerList: [], //轮播图的数据
    };
  },
  methods: {
    changeIndex(index) {
      this.selectedIndex = index;
      if (index == 1) {
        //千万别写=
        this.com = "nowplaying";
      } else {
        this.com = "comingsoon";
      }
    },
  },
  components: {
    swiper,
    comingsoon,
    nowplaying,
  },
  created() {
    axios({
      url: "http://192.168.61.174:6789/bannerlist",
    }).then((res) => {
      console.log(res.data);
      this.bannerList = res.data;
    });
  },
};
</script>

完整的代码如上

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值