vue 1.x 交互实现仿百度下拉列表示例


Posted in Javascript onOctober 21, 2017

0、前言

vue 本身不支持交互,想要做交互,必须引入ajax 模块。vue 团队提供一个新的库文件叫做 vue-resource.js 。

网络CDN:https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js

1、用法分类

ajax 交互通常分为3类,get,post,jsonp

html 部分的代码:数组myData 的数据通过ul 列表显示出来,用"v-for"指令

<body> 
    <div id="box">
      <input type="text" value="" v-model="m" @keyup="get()">
      {{m}}<br/>
      {{msg}}<br/>
      {{'welcome'|uppercase}}
      <ul>
        <li v-for="value in myData">
          {{value}}
        </li>
      </ul>
      <p v-show="myData.length == 0">暂无数据</p>
    </div> 
</body>

1) get 请求

methods:{
  get: function(){
    this.$http.get('search',{
      wd:this.m
  }).then(function(res){
  this. myData= res.body
  },function(res){
  console.log(res.status)
})
}
  }

2)post 请求

methods:{get : function () {
          this.$http.post('search',{
            wd:this.m
          },{
            emulateJSON:true,   //在get 请求的基础上添加了第3个参数
          }).then(function(res){
            this.myData=res.body;
          },function(res){
            console.log('err---');
            // alert(2)
            //this.myData = ['aaa', 'a111', 'a222'];
          })
          
        }}

在后台项目中,调试运行结果如下:

vue 1.x 交互实现仿百度下拉列表示例

输入关键字“a”后,进入断点,获取数据:

vue 1.x 交互实现仿百度下拉列表示例

3)jsonp 能够发送跨域请求,用的不多,不在此赘述

2、总结:

本片文章要求掌握get 和post 请求的写法,v-model 双向绑定数据,列表中运用v-for显示数组的数据,v-show 后面接条件控制数据显示与否

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
读jQuery之四(优雅的迭代)
Jun 20 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
javascript break指定标签打破多层循环示例
Jan 20 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
May 11 Javascript
原生js代码实现图片放大境效果
Oct 30 Javascript
JavaScript实现邮箱地址自动匹配功能代码
Nov 28 Javascript
jquery 判断是否支持Placeholder属性的方法
Feb 07 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
原生js无缝轮播插件使用详解
Mar 09 Javascript
vue postcss-px2rem 自适应布局
May 15 Vue.js
JS返回顶部实例代码
Aug 09 #Javascript
VUE2实现事件驱动弹窗示例
Oct 21 #Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 #Javascript
vue使用keep-alive实现数据缓存不刷新
Oct 21 #Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 #Javascript
Vue filter介绍及其使用详解
Oct 21 #Javascript
详解node nvm进行node多版本管理
Oct 21 #Javascript
You might like
ThinkPHP的URL重写问题
2014/06/22 PHP
彪哥1.1(智能表格)提供下载
2006/09/07 Javascript
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
JQuery跨Iframe选择实现代码
2010/08/19 Javascript
js中定义一个变量并判断其是否为空的方法
2014/05/13 Javascript
jquery实现倒计时代码分享
2014/06/13 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
AngularJS ng-mousedown 指令
2016/08/02 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
ejsExcel模板在Vue.js项目中的实际运用
2018/01/27 Javascript
vue.js做一个简单的编辑菜谱功能
2018/05/08 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
快速解决vue-cli在ie9+中无效的问题
2018/09/04 Javascript
详解如何使用node.js的开发框架express创建一个web应用
2018/12/20 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
[37:50]VP vs TNC Supermajor小组赛B组 BO3 第一场 6.2
2018/06/03 DOTA
Python 的 with 语句详解
2014/06/13 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
Python基础之文件读取的讲解
2019/02/16 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
python 哈希表实现简单python字典代码实例
2019/09/27 Python
python 使用opencv 把视频分割成图片示例
2019/12/12 Python
Tensorflow tf.dynamic_partition矩阵拆分示例(Python3)
2020/02/07 Python
无谷物狗粮:Pooch & Mutt
2018/05/23 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
英语翻译系毕业生求职信
2013/09/29 职场文书
业绩考核岗位职责
2014/02/01 职场文书
鸿星尔克广告词
2014/03/21 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
2015年护士节慰问信
2015/03/23 职场文书
怎样写观后感
2015/06/19 职场文书
感恩教师节主题班会
2015/08/12 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python