点击“每小时 / 每天” 按钮时,分别显示不同的天气预报格式。用动态组件实现。第1、2行的文字部分用插槽实现。
时间: 2024-10-09 22:05:51 浏览: 7
在Vue.js中,为了实现这个功能,你可以创建一个名为`WeatherCard`的自定义组件,该组件包含两个按钮,以及用于显示不同天气格式的动态内容区域。这里是一个简化的例子:
```html
<template>
<div class="weather-card">
<h2 slot="header">当前天气</h2>
<!-- 显示每小时的天气 -->
<button @click="showHourlyForecast">每小时</button>
<div v-if="displayHourly" class="hourly-forecast">
<slot name="hourly-format"></slot>
</div>
<!-- 显示每天的天气 -->
<button @click="showDailyForecast">每天</button>
<div v-if="displayDaily" class="daily-forecast">
<slot name="daily-format"></slot>
</div>
</div>
</template>
<script>
export default {
data() {
return {
displayHourly: false,
displayDaily: false,
};
},
methods: {
showHourlyForecast() {
this.displayHourly = true;
this.displayDaily = false; // 关闭每天的展示,避免同时显示
},
showDailyForecast() {
this.displayHourly = false;
this.displayDaily = true;
},
},
};
</script>
```
在这个组件中,`<slot>`标签用于接收外部传递的内容。当点击“每小时”按钮时,`displayHourly`会被设置为`true`,显示`<slot name="hourly-format"></slot>`这部分的内容;点击“每天”按钮,则会切换到显示`<slot name="daily-format"></slot>`的内容。