作业39

作业39

1.把课堂案例选项卡封装成组件，组件名：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(){return {num:0}},
    }
</script>

<style scoped>
    #card{
         500px;
        height: 350px;
    }
    .title{
        height:50px;
    }
    .title span{
         150px;
        height: 50px;
        background-color:#ccc;
        display: inline-block;
        line-height: 50px; /* 设置行和当前元素的高度相等,就可以让文本内容上下居中 */
        text-align:center;
    }
    .content .list{
         500px;
        height: 300px;
        background-color: yellow;
        display: none;
    }
    .content .active{
        display: block;
    }

    .title .current{
        background-color: yellow;
    }
</style>

2.把课堂案例获取天气封装成组件，组件名：Weather.vue

<template>
    <div id="app">
      请输入城市：<input type="text" v-model="city">
      <button @click="get_weather(city)">获取天气</button>
      <table>
          <tr>
              <th>日期</th>
              <th>最高温度</th>
              <th>风力</th>
              <th>最低温度</th>
              <th>风向</th>
              <th>天气</th>
          </tr>
  <!--        昨天天气！！！！！！！！！！！！！！！！！！！参数顺序都不一样-->
          <tr v-for="item in forecast">
              <th>{{item.date}}</th>
              <th>{{item.high}}</th>
              <th v-if="item.fl">{{item.fl}}</th>
              <th v-else>{{item.fengli}}</th>
              <th>{{item.low}}</th>
              <th v-if="item.fx">{{item.fx}}</th>
              <th v-else>{{item.fengxiang}}</th>
              <th>{{item.type}}</th>
          </tr>
      </table>
  </div>
</template>


<script>
    import axios from 'axios'
    export default {
        name: "Weather",
        data(){return {city:'',forecast:{}}},
        methods:{
          get_weather(city){
            axios.get('http://wthrcdn.etouch.cn/weather_mini',{params:{city:city}}).then(response=>{
              this.forecast=response.data.data.forecast;
              this.forecast.unshift(response.data.data.yesterday)
            })
          }
        }
    }
</script>

<style scoped>

</style>