Vue和axios结合的小案例1

1、按下回车,页面不跳转,显示数据 2、回车查询(1)先写一个js文件 (2)然后引入html页面中 (3)将methods中的方法绑定到文本框上,keyup.enter代表敲回车,执行searchweather方法 ...

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

基础教程推荐