vue实践案例+代码

  1. 用vue实现记事本（新增，删除，统计， 清空，隐藏底部统计栏）
  2. 网络应用：vue+axios实现天气预报

本文目录

功能

输入查询

  1. 设置文本框，当按下回车键时，触发事件
  2. 调用天气预报接口，将返回的天气数据赋值给定义的天气数组
  3. 天气预报接口：http://wthrcdn.etouch.cn/weather_mini

html部分

<input type="text" class="city" placeholder="请输入查询的天气" v-model="city"  @keyup.enter="setCity">

js部分

setCity:function(){
	// console.log("天气预报");
	// console.log(this.city);
	//定义that来保存this
	var that=this;
	// 调用接口
	axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+this.city)
	.then(function(response){
		// console.log(response);
		// 找到需要的数据，注意路径
		that.weather=response.data.data.forecast;
		// slice()该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
		that.weather_1=response.data.data.forecast.slice(0,2);
		that.isIf_2=false;
		that.isIf_1=true;
	})
	.catch(function(error){
		console.log(error);
	})
}

点击查询

  1. 设置列表，为每一个列表项绑定点击事件，当点击时触发changeCity()
  2. 改变city的值，然后调用接口的那个方法，进行查询

html部分

<ul class="cityed">
    <li class="name" @click="changeCity('太原')">太原</li>
    <li class="name" @click="changeCity('大同')">大同</li>
    <li class="name" @click="changeCity('平遥')">平遥</li>
</ul>

js部分

changeCity:function(city){
	this.city=city;
	// 用this可以点出methonds中其他方法
	this.setCity();
}

点击查看5天的天气预报

每次只显示一个列表

  1. 用v-for设置两个列表，列表项的值用插值表达式表示
  2. 用v-if来控制每个列表的显示与否，当点击“5天天气时”，触发show()方法，“isIf_2”变为true，显示5天天气情况（第二个列表），同时，isIf_1变为false，隐藏第一个列表

html部分

<!--第一个列表-->
<div>
	<ul class="weather_1" v-if="isIf_1">
		<li class="weather_1_text text_1"><b>{{city}}</b></li>
		<li class="weather_1_text text_2" v-for="dayW_1 in weather_1">
			<p class="text_2_content">{{dayW_1.date}}</p>
			<h3 class="text_2_content text_color">{{dayW_1.type}}</h3>
			<p class="text_2_content">{{dayW_1.low}}~{{dayW_1.high}}</p>
		</li>
		<li class="weather_1_text text_last" @click="show"><br>5天<br>天气</li>
	</ul>
</div>
<!--第二个列表-->
<ul  class="weather" v-if="isIf_2">
	<li v-for="dayW in weather" class="content">
		<h2 class="textWeather text_color">{{dayW.type}}</h2>
		<p class="textWeather text_color"><b>{{dayW.low}} ~ {{dayW.high}}</b></p>
		<p class="textWeather">{{dayW.fengxiang}}({{dayW.fengli}})</p>
		<p class="textWeather">{{dayW.date}}</p>
	</li>
</ul>

js部分

show:function(){
	// 引用data中数据必须要用this
	this.isIf_2=true;
	this.isIf_1=false;
}

整体代码

css部分

*{
    margin: 0;
    padding: 0;
}
input{ 
    outline:none;  
    color: #666;
}
ul li{
    list-style-type:none;
} 
#center{
    max-width: 1200px;
    margin: 0 auto;
}
header{
    width: 100%;
    height: 70px;
    position: relative;
}
.logo{
    width: 16.7%;
    height: 50px;
    position: absolute;
    left: 1%;
    top: 14%;
}
.city{
    width: 250px;
    height: 30px;
    font-size: 16px;
    position: absolute;
    top: 19%;
    right: 1%;
}
.cityed{
    display: flex;
    position: absolute;
    bottom: 1%;
    right: 1%;
}
.name{
    margin-right: 10px;
    color: #666;
}
/* 选择的链接:active*/
.name:hover{
    color: rgba(0, 162, 255, 0.883);
}
section{
    width: 100%;
    height: 500px;
}
.weather_1{
    display: flex;
    margin-top: 100px;
    justify-content: center;
}
.weather_1_text{
    width: 220px;
    height: 100px;
    text-align: center;
}
.weather_1_text.text_1{
    line-height: 120px;
}
.weather_1_text.text_2{
    padding-top: 20px;
}
.weather_1_text .text_2_content{
    margin-bottom: 5px;
}
.weather_1_text.text_last{
    color: rgba(0, 162, 255, 0.883);
    padding-top: 20px;
}
.weather_1_text.text_last:hover{
    background-color: rgba(0, 162, 255, 0.883);
    color: white;
}
.weather{
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
}
ul>li+li{
    border-left: 1px solid rgba(163, 162, 162, 0.918);

}
.content{
    width: 238px;
    height: 200px;
    text-align: center;
}
.textWeather{
    margin-top: 25px;
}
.text_color{
    color: rgba(255, 140, 0, 0.671);
}

html部分

<div id="center">
    <div id="test">
        <header>
            <img src="https://beyondclouds.oss-cn-beijing.aliyuncs.com/blog/images/b94bd53e-a3ac-4c5d-9e7b-79c773baf73f.png" alt="" title="欢迎访问王胖子的网站" class="logo">
            <div>
                <input type="text" autofocus class="city" placeholder="请输入查询的天气" v-model="city"  @keyup.enter="setCity">
                <ul class="cityed">
                    <li class="name" @click="changeCity('太原')">太原</li>
                    <li class="name" @click="changeCity('大同')">大同</li>
                    <li class="name" @click="changeCity('平遥')">平遥</li>
                </ul>
            </div>
        </header>
        <section>
            <div>
                <ul class="weather_1" v-if="isIf_1">
                    <li class="weather_1_text text_1"><b>{{city}}</b></li>
                    <li class="weather_1_text text_2" v-for="dayW_1 in weather_1">
                        <p class="text_2_content">{{dayW_1.date}}</p>
                        <h3 class="text_2_content text_color">{{dayW_1.type}}</h3>
                        <p class="text_2_content">{{dayW_1.low}}~{{dayW_1.high}}</p>
                    </li>
                    <li class="weather_1_text text_last" @click="show"><br>5天<br>天气</li>
                </ul>
            </div>
            <div>
                <ul  class="weather" v-if="isIf_2">
                    <li v-for="dayW in weather" class="content">
                        <h2 class="textWeather text_color">{{dayW.type}}</h2>
                        <p class="textWeather text_color"><b>{{dayW.low}} ~ {{dayW.high}}</b></p>
                        <p class="textWeather">{{dayW.fengxiang}}({{dayW.fengli}})</p>
                        <p class="textWeather">{{dayW.date}}</p>
                    </li>
                </ul>
            </div>
        </section>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="http://unpkg.com/axios/dist/axios.min.js"></script>

js部分

var test = new Vue({
    el:"#test",
    data:{
        city:"",
        weather:[],
        weather_1:[],
        isIf_1:false,
        isIf_2:false,
    },
    methods:{
        setCity:function(){
            // console.log("天气预报");
            // console.log(this.city);
            //定义that来保存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.weather=response.data.data.forecast;
                console.log(that.weather)
                // slice()该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。
                that.weather_1=response.data.data.forecast.slice(0,2);
                that.isIf_2=false;
                that.isIf_1=true;
            })
            .catch(function(error){
                console.log(error);
            })
        },
        changeCity:function(city){
            this.city=city;
            // 用this可以点出methonds中其他方法
            this.setCity();
        },
        show:function(){
            // 引用data中数据必须要用this
            this.isIf_2=true;
            this.isIf_1=false;
        }
    }
})

页面效果展示

1. 首页
在这里插入图片描述
2. 输入城市按下回车查询
在这里插入图片描述
3. 点击5天天气查看详细信息（每次只显示一个列表）
在这里插入图片描述

在这里插入图片描述
4. 点击上方已有城市进行查询
在这里插入图片描述

结束

好啦，这个vue实例案例到这里就结束咯，希望和大家一起学习进步

# vue.js
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

小窗口大魔力，实况窗服务实时掌控重要信息变化

avatar 华为云开发者联盟
cover

GeminiDB全面联动MySQL：热点数据，一键加速

avatar 华为云开发者联盟
cover

GaussDB数据库查询重写的自动挖掘与生成

avatar 华为云开发者联盟