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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
jQuery插件uploadify实现ajax效果的图片上传
Jun 18 Javascript
js表单登陆验证示例
Oct 19 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
详解node单线程实现高并发原理与node异步I/O
Sep 21 Javascript
vuex提交state&amp;&amp;实时监听state数据的改变方法
Sep 16 Javascript
微信小程序实现展示评分结果功能
Feb 15 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
微信小程序将页面按钮悬浮固定在底部的实现代码
Oct 29 Javascript
如何在JavaScript中等分数组的实现
Dec 13 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代码DOS造成用光网络带宽
2011/03/01 PHP
PHP 双链表(SplDoublyLinkedList)简介和使用实例
2015/05/12 PHP
PHP用mb_string函数库处理与windows相关中文字符及Win环境下开启PHP Mb_String方法
2015/11/11 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
Jquery异步请求数据实例代码
2011/12/28 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
JavaScript仿聊天室聊天记录
2016/12/27 Javascript
微信小程序之picker日期和时间选择器
2017/02/09 Javascript
深入浅析AngularJS中的一次性数据绑定 (bindonce)
2017/05/11 Javascript
jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
2017/05/26 jQuery
浅谈用Webpack路径压缩图片上传尺寸获取的问题
2018/02/22 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
Python实现的金山快盘的签到程序
2013/01/17 Python
python中的字典详细介绍
2014/09/18 Python
python实现根据窗口标题调用窗口的方法
2015/03/13 Python
使用Python的内建模块collections的教程
2015/04/28 Python
详解python的webrtc库实现语音端点检测
2017/05/31 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
Python配置文件处理的方法教程
2019/08/29 Python
python os模块在系统管理中的应用
2020/06/22 Python
美国波西米亚风格服装品牌:Show Me Your Mumu
2018/01/05 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
求职自荐信
2013/12/14 职场文书
校长就职演讲稿
2014/01/06 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
个人委托书
2014/07/31 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
开展党的群众路线教育实践活动个人对照检查材料
2014/11/05 职场文书
2014年服务行业工作总结
2014/11/18 职场文书
如何用Navicat操作MySQL
2021/05/12 MySQL
vue的项目如何打包上线
2022/04/13 Vue.js