vue组件实现:应用props参数实现影视网中热播电影和经典电影之间的切换。运行程序,在页面中会显示“热播”选项卡中的电影信息,当鼠标指向“经典”选项卡时,会显示该选项卡中的电影信息。
时间: 2023-11-27 17:52:16 浏览: 111
首先,我们需要创建一个父组件,包含两个子组件:热播电影和经典电影。在父组件中,我们通过props参数将当前选中的tab传递给子组件,以便子组件根据当前选中的tab来展示对应的电影信息。
```html
<template>
<div>
<div class="tabs">
<div class="tab" :class="{ active: currentTab === 'hot' }" @click="currentTab = 'hot'">热播</div>
<div class="tab" :class="{ active: currentTab === 'classic' }" @click="currentTab = 'classic'">经典</div>
</div>
<hot-movies v-show="currentTab === 'hot'" :movies="hotMovies"></hot-movies>
<classic-movies v-show="currentTab === 'classic'" :movies="classicMovies"></classic-movies>
</div>
</template>
<script>
import HotMovies from './HotMovies.vue'
import ClassicMovies from './ClassicMovies.vue'
export default {
components: {
HotMovies,
ClassicMovies
},
data() {
return {
currentTab: 'hot',
hotMovies: [
{ title: '电影1', rating: 8.9 },
{ title: '电影2', rating: 9.2 },
{ title: '电影3', rating: 7.5 }
],
classicMovies: [
{ title: '电影4', rating: 8.0 },
{ title: '电影5', rating: 8.5 },
{ title: '电影6', rating: 7.9 }
]
}
}
}
</script>
```
然后,我们需要创建两个子组件:热播电影和经典电影。在子组件中,我们通过props参数接收父组件传递的电影信息,并将其展示在页面上。
```html
<template>
<div>
<div v-for="movie in movies" :key="movie.title">
<h3>{{ movie.title }}</h3>
<p>评分:{{ movie.rating }}</p>
</div>
</div>
</template>
<script>
export default {
props: {
movies: {
type: Array,
required: true
}
}
}
</script>
```
这样,我们就完成了通过props参数实现影视网中热播电影和经典电影之间的切换的功能。
阅读全文