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 相关文章推荐
JScript中的undefined和&quot;undefined&quot;的区别
Mar 08 Javascript
JQuery,Extjs,YUI,Prototype,Dojo 等JS框架的区别和应用场景简述
Apr 15 Javascript
做好七件事帮你提升jQuery的性能
Feb 06 Javascript
JavaScript实现的encode64加密算法实例分析
Apr 15 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
简单实现JS倒计时效果
Dec 23 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
原生js实现淘宝购物车功能
Jun 23 Javascript
js css自定义分页效果
Feb 24 Javascript
详解webpack4升级指南以及从webpack3.x迁移
Jun 12 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
微信小程序实现多图上传
Jun 19 Javascript
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
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
百度工程师讲PHP函数的实现原理及性能分析(二)
2015/05/13 PHP
php安装ssh2扩展的方法【Linux平台】
2016/07/20 PHP
Laravel实现表单提交
2017/05/07 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
PDO::errorInfo讲解
2019/01/28 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
javascript下查找父节点的简单方法
2007/08/13 Javascript
Javascript模块模式分析
2008/05/16 Javascript
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
2010/05/27 Javascript
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
2015/01/24 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
JS实现根据用户输入分钟进行倒计时功能
2016/11/14 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
Node.js中DNS模块学习总结
2018/02/28 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
2018/05/22 Javascript
详解小程序BackgroundAudioManager踩坑之旅
2019/12/08 Javascript
JS co 函数库的含义和用法实例总结
2020/04/08 Javascript
Python中操作mysql的pymysql模块详解
2016/09/13 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
Flask框架工厂函数用法实例分析
2019/05/25 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
关于Python3 lambda函数的深入浅出
2019/11/27 Python
在Tensorflow中查看权重的实现
2020/01/24 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
毕业生就业自荐书
2013/12/15 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
在职证明书模板
2015/06/15 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
用Python实现一个打字速度测试工具来测试你的手速
2021/05/28 Python
Python学习开发之图形用户界面详解
2021/08/23 Python
python实现简单石头剪刀布游戏
2021/10/24 Python