| 这是本人在自学vue框架时候所模仿的一个网站，可以查询一些城市的天气情况，大家可以看看： html代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>焕鑫知道</title> <link rel="stylesheet" href="css/reset.css" /> <link rel="stylesheet" href="css/index.css" /></head><body> <div class="wrap" id="app"> <div class="search_form"> <div class="logo"><p style="color: red;text-align: center; font-size: 64px;">查天气</p></div> <div class="form_group"> <input type="text" class="input_txt" placeholder="请输入查询的天气" v-model="city" @keyup.enter="queryWeather" /> <button class="input_sub" @click="queryWeather"> 搜 索 </button> </div> <div class="hotkey"> <!-- <a href="javascript:;" @click="clickSearch('北京')">北京</a> <a href="javascript:;" @click="clickSearch('上海')">上海</a> <a href="javascript:;" @click="clickSearch('广州')">广州</a> <a href="javascript:;" @click="clickSearch('深圳')">深圳</a> --> <a href="javascript:;" v-for="city in hotCitys" @click="clickSearch(city)">{{ city }}</a> </div> </div> <ul class="weather_list"> <li v-for="(item,index) in forecastList" :key="item.date" :style="{transitionDelay:index*100+'ms'}"> <div class="info_type"> <span class="iconfont">{{ item.type }}</span> </div> <div class="info_temp"> <b>{{ item.low}}</b> ~ <b>{{ item.high}}</b> </div> <div class="info_date"> <span>{{ item.date }}</span> </div> </li> </ul> </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 官网提供的 axios 在线地址 --> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> new Vue({ el: "#app", data: { city: "武汉", forecastList: [], hotCitys: ["北京", "上海", "广州", "深圳"] }, methods: { queryWeather() { this.forecastList = []; axios .get(`http://wthrcdn.etouch.cn/weather_mini?city=${this.city}`) .then(res => { console.log(res); this.forecastList = res.data.data.forecast; }) .catch(err => { console.log(err); }) .finally(() => { }); }, clickSearch(city) { this.city = city; this.queryWeather(); } } }); </script></body></html>js的代码 /* 请求地址:http://wthrcdn.etouch.cn/weather_mini 请求方法:get 请求参数:city(城市名) 响应内容:天气信息 1. 点击回车 2. 查询数据 3. 渲染数据 */ var app = new Vue({ el:"#app", data:{ city:'', weatherList:[] }, methods: { searchWeather:function(){ // console.log('天气查询'); // console.log(this.city); // 调用接口 // 保存this var that = this; axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city) .then(function(response){ // console.log(response); console.log(response.data.data.forecast); that.weatherList = response.data.data.forecast }) .catch(function(err){}) } }, })首页的css文件 body{ font-family:'Microsoft YaHei'; }.wrap{ position: fixed; left:0; top:0; width:100%; height:100%; /* background: radial-gradient(#f3fbfe, #e4f5fd, #8fd5f4); */ /* background:#8fd5f4; */ /* background: linear-gradient(#6bc6ee, #fff); */ background:#fff;}.search_form{ width:640px; margin:100px auto 0;}.logo img{ display:block; margin:0 auto;}.form_group{ width:640px; height:40px; margin-top:45px;}.input_txt{ width:538px; height:38px; padding:0px; float:left; border:1px solid #41a1cb; outline:none; text-indent:10px;}.input_sub{ width:100px; height:40px; border:0px; float: left; background-color: #41a1cb; color:#fff; font-size:16px; outline:none; cursor: pointer; position: relative;}.input_sub.loading::before{ content:''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../img/loading.gif');}.hotkey{ margin:3px 0 0 2px;}.hotkey a{ font-size:14px; color:#666; padding-right:15px;}.weather_list{ height:200px; text-align:center; margin-top:50px; font-size:0px;}.weather_list li{ display:inline-block; width:140px; height:200px; padding:0 10px; overflow: hidden; position: relative; background:url('../img/line.png') right center no-repeat; background-size: 1px 130px;}.weather_list li:last-child{ background:none;}/* .weather_list .col02{ background-color: rgba(65, 165, 158, 0.8);}.weather_list .col03{ background-color: rgba(94, 194, 237, 0.8);}.weather_list .col04{ background-color: rgba(69, 137, 176, 0.8);}.weather_list .col05{ background-color: rgba(118, 113, 223, 0.8);} */.info_date{ width:100%; height:40px; line-height:40px; color:#999; font-size:14px; left:0px; bottom:0px; margin-top: 15px;}.info_date b{ float: left; margin-left:15px;}.info_type span{ color:#fda252; font-size:30px; line-height:80px;}.info_temp{ font-size:14px; color:#fda252;}.info_temp b{ font-size:13px;}.tem .iconfont { font-size: 50px; }reset的css文件 body,ul,h1,h2,h3,h4,h5,h6{ margin: 0; padding: 0;}h1,h2,h3,h4,h5,h6{ font-size:100%; font-weight:normal;}a{ text-decoration:none;}ul{ list-style:none;}img{ border:0px;}/* 清除浮动，解决margin-top塌陷 */.clearfix:before,.clearfix:after{ content:''; display:table; }.clearfix:after{ clear:both;}.clearfix{ zoom:1;}.fl{ float:left;}.fr{ float:right;}测试结果 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
Vue+Openlayer中使用select选择要素的实现代码
vue加载天气组件使用方法详解 |
