<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>天气</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
<link href="style.css" rel="stylesheet"/>
</head>
<body>
<div id="app">
<!-- 头部信息栏 -->
<div class="cm-header">
<span class=" cm-header-icon fl" v-show="main_sign > 1" @click="back">
<i class="icon-back"></i>
</span>
<span class=" cm-header-btn fr" v-show="header.right" @click="rightAction" v-text="header.refreshText">
</span>
<h1 class="cm-page-title" v-text="header.title">
</h1>
</div>
<div id="main">
<div class="city" v-show="main_sign == 1">
<ul>
<li v-for="provinceInfo in provinceList" class="listCell" @click="goCity(provinceInfo)">
<span v-text="provinceInfo.n"></span>
</li>
</ul>
</div>
<div class="city" v-show="main_sign == 2">
<ul>
<li v-for="city in cityList" class="listCell" @click="goCounty(city)">
<span v-text="city.cityZh"></span>
</li>
</ul>
</div>
<div class="city" v-show="main_sign == 3">
<ul>
<li v-for="countyInfo in countyList" class="listCell" @click="goWeather(countyInfo)">
<span v-text="countyInfo.cityZh"></span>
</li>
</ul>
</div>
<div class="weather" v-show="main_sign == 4">
<div >
<div v-show='filterType==0' :filter-type="filterType">
<span v-text="location"></span>
<div class="temp" v-show="weatherInfo">
<div class="deg" v-text="temp"></div><div class="zero">0</div>
</div>
<div class="desc" v-show="weatherInfo">
<p v-text="description"></p>
<p v-text="humidity"></p>
</div>
</div>
<div v-show='filterType==1' :filter-type="filterType">
<span v-text="location"></span>
<ul>
<li v-for="weather in weatherList" v-text="weather.morning"></li>
</ul>
</div>
</div>
<ul class="botmFilter">
<li @click="changeFilter(0)" :class="{current: filterType==0}">
目前天气
</li>
<li @click="changeFilter(1)" :class="{current: filterType==1}">
7天天气
</li>
</ul>
</div>
<div class="wrapper" :class="{mask: loadingOptions && loadingOptions.mask}"
transition="fade"
v-show="loadingOptions && loadingOptions.loading"
@click="hide">
<div class="loading-box2" >
<div class="loading-layer2">
<canvas class="loading-layer2-before"></canvas>
<p>努力加载中...</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Vue实战，天气预报DEMO实例
5星 · 超过95%的资源 需积分: 50 186 浏览量
2017-01-12
14:27:39
上传
评论 1
收藏 320KB ZIP 举报 
weather.zip （19个子文件） 
weather 
index.html 4KB
main.js 8KB vue.js 206KB assets 
map-mask.png 7KB daytime.png 2KB weather snow.png 9KB cloudy.png 17KB moon.png 12KB haze.png 20KB sunny.png 16KB drizzle.png 15KB mostlycloudy.png 21KB thunderstorms.png 25KB drizzlesnow.png 12KB slightdrizzle.png 21KB cloudynight.png 26KB background.png 13KB style.css 4KB weather.json 661KB
- 1
- 2
- 3
前往页