Vue和axios结合的小案例1

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

Vue和axios结合的小案例1

 

 

2、回车查询

(1)先写一个js文件

Vue和axios结合的小案例1

 

 

 

 

 

(2)然后引入html页面中

 

 

Vue和axios结合的小案例1

 

 

 

 

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

 

Vue和axios结合的小案例1

 

 

 

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

 

Vue和axios结合的小案例1(此时city里面显示空)

 

 

 

Vue和axios结合的小案例1(与city进行绑定)

 

 

 

 

 

 

Vue和axios结合的小案例1(在文本框中输入内容,data里面的city属性也会发生变化,可以用this.city进行查看)

 

 

 

 

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

 

Vue和axios结合的小案例1

 

 

 

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

 

 

 

Vue和axios结合的小案例1

 

 

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

 

Vue和axios结合的小案例1

 

 

 

 

 

Vue和axios结合的小案例1

 

Vue和axios结合的小案例1

上一篇:华为怎么绕过密码直接进入手机


下一篇:Linux swap分区使用率高进程排查方法