Vue實現天氣查詢以及本地搜索功能

本文轉載自查看原文 2020-11-27 18:50 455

案例效果

代碼示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <link rel="stylesheet" type="text/css" href="css/bootstrap4.min.css" />
        <script src="http://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    </head>
    <body>
        <div id="app" style="width: 700px;margin: 0 auto;">

            <!-- 代碼 -->
            <input type="text" placeholder="請輸入城市，然后回車進行搜索" class="form-control" style="margin: 10px 0;" @keyup.enter="fun1"
             v-model="city">
             
             
             <!--搜索-->
             <input type="text" placeholder="輸入星期搜索" class="form-control" style="margin: 10px 0;" v-model="content">

            <!-- 圖表容器 DOM -->
            <div id="container" style="width: 700px;height:400px;margin: 10px 0;"></div>

            <ul class="list-group">
                <li class="list-group-item" v-for="(v,k) in search">
                    <p>
                        {{v.days}} {{v.week}}
                        {{v.temperature}}

                    </p>
                    <p>
                        地點：{{v.citynm}}
                        &emsp;
                        天氣：{{v.weather}}
                        <img :src="v.weather_icon">
                        <img :src="v.weather_icon1">
                    </p>

                    <p>
                        風向：{{v.wind}}&emsp;
                        風力：{{v.winp}}&emsp;
                        最高溫度：{{v.temp_high}}℃&emsp;
                        最低溫度：{{v.temp_low}}℃
                    </p>


                </li>
            </ul>

        </div>
    </body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            city: '',
            arr: [],
            word: '',
            content:''
        },
        computed:{
            search(){
                if(this.content.length==0){
                    return this.arr
                }else{
                    var obj = this
                    var list = []
                    this.arr.map(function(v){
                        if(v.week.indexOf(obj.content)>-1){
                            list.push(v)
                        }
                    })
                    return list
                }
                
            }
        },
        methods: {
            fun1() {
                var obj = this
                //發起ajax請求
                axios
                    .get('http://api.k780.com/?app=weather.future&weaid=' + obj.city +
                        '&&appkey=55739&sign=76e2a876f7c2c23d54f16aec62179ae1&format=json')
                    .then(function(res) {
                        console.log(res.data.result)
                        var result = res.data.result//將結果取出來數組然后賦值給變量
                        obj.arr = result//替換，因為頁面要顯示列表
                        
                        //處理數組，得到時間、最高溫度、最低溫度
                        var shijian = []
                        var zuigao = []
                        var zuidi = []
                        
                        for(var i=0;i<result.length;i++){
                            // console.log(result[i].days)
                            shijian.push(result[i].days)
                            zuigao.push(Number(result[i].temp_high))
                            zuidi.push(Number(result[i].temp_low))
                        }
                        
                        
                        
                        //請求成功展示圖表
                        // 圖表配置
                        var options = {
                            chart: {
                                type: 'line' //指定圖表的類型，默認是折線圖（line）
                            },
                            title: {
                                text: obj.city+'最近7天的天氣' // 標題
                            },
                            xAxis: {
                                categories: shijian // x 軸分類
                            },
                            yAxis: {
                                title: {
                                    text: '溫度統計' // y 軸標題
                                }
                            },
                            series: [{ // 數據列
                                name: '最高溫度（℃）', // 數據列名
                                data: zuigao // 數據    
                            }, {
                                name: '最低溫度（℃）',
                                data: zuidi
                            }]
                        };
                        // 圖表初始化函數
                        var chart = Highcharts.chart('container', options);


                    })
            }
        }
    })
</script>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue實現天氣查詢 vue實現搜索功能 vue實現搜索功能 vue案例--實現搜索功能 vue天氣查詢 vue:天氣查詢 vue搜索功能實現（vue+element）純前端實現搜索功能、模糊查詢 vue中實現搜索過濾功能 vue實現添加，刪除，搜索功能