79.Vue04——课后练习

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>