首页 > 移动平台 > 详细

Vue和axios结合的小案例1

时间:2021-04-06 20:42:56      阅读:29      评论:0      收藏:0      [点我收藏+]

1、按下回车,页面不跳转,显示数据

技术分享图片

 

 

2、回车查询

(1)先写一个js文件

技术分享图片

 

 

 

 

 

(2)然后引入html页面中

 

 

技术分享图片

 

 

 

 

(3)将methods中的方法绑定到文本框上,keyup.enter代表敲回车,执行searchweather方法

 

技术分享图片

 

 

 

(4)v-modal 双向绑定方法,我改变搜索框中的数据,随即我的Vue实例中data的某一属性就会发生变化

 

技术分享图片(此时city里面显示空)

 

 

 

技术分享图片(与city进行绑定)

 

 

 

 

 

 

技术分享图片(在文本框中输入内容,data里面的city属性也会发生变化,可以用this.city进行查看)

 

 

 

 

(5)axios技术查询天气情况

 

技术分享图片

 

 

 

(6)创建一个数组来接收数据,然后将返回的数据赋值给数组中

 

 

 

技术分享图片

 

 

 (7)、使用v-for标签来遍历天气数组

 

技术分享图片

 

 

 

 

 

技术分享图片

 

Vue和axios结合的小案例1

原文:https://www.cnblogs.com/baotianyi/p/14622741.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!