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

最新推荐文章于 2023-06-07 17:52:54 发布

大雷神

最新推荐文章于 2023-06-07 17:52:54 发布

阅读量1.5k

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/ldc121xy716/article/details/110438747

版权

vue 专栏收录该内容

28 篇文章 41 订阅

订阅专栏

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>

完整的代码如上