1. 把课堂案例选项卡封装成组件,组件名:Card.vue
2. 把课堂案例获取天气封装成组件,组件名:Weather.vue
app.vue
<template> <div> <home></home> <card></card> <weather></weather> </div> </template> <script> import Home from './components/Home' import card from './components/card' import weather from './components/weather' export default { name:'App', components:{Home,card,weather} } </script> <style scoped> </style>
card.vue
<template> <div id="card"> <div class="title"> <span @click="num=0" :class="num==0?'current':''">国内新闻</span> <span @click="num=1" :class="num==1?'current':''">国际新闻</span> <span @click="num=2" :class="num==2?'current':''">银河新闻</span> </div> <div class="content"> <div class="list" :class="num==0?'active':''">国内新闻列表</div> <div class="list" :class="num==1?'active':''">国际新闻列表</div> <div class="list" :class="num==2?'active':''">银河新闻列表</div> </div> </div> </template> <script> export default { name: "card", data: function () { return { num:0 } } } </script> <style scoped> #card{ width: 500px; height: 350px; } .title{ height:50px; } .title span{ width: 100px; height: 50px; background-color:#ccc; display: inline-block; line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */ text-align:center; } .content .list{ width: 500px; height: 300px; background-color: yellow; display: none; } .content .active{ display: block; } .title .current{ background-color: yellow; } </style>
weather.vue
<template> <div id="weather"> <input type="text" v-model="city"> <button @click="get_weather">点击获取天气</button> <h2>{{city}}天气</h2> <table> <tr> <th>日期</th> <th>天气</th> <th>最高温</th> <th>最低温</th> </tr> <tr v-for="item in weather_list"> <td>{{item.date}}</td> <td>{{item.type}}</td> <td>{{item.high}}</td> <td>{{item.low}}</td> </tr> </table> </div> </template> <script> import axios from 'axios' export default { name: "weather", data:function () { return{ city:"", weather_list:[] } }, methods:{ get_weather(){ axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city) .then(response=>{ this.weather_list= response.data.data.forecast; this.weather_list.splice(0,0,response.data.data.yesterday); console.log(response); }).catch(error=>{ console.log(error.response) }); } } } </script> <style scoped> </style>