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 相关文章推荐
JS判断数组中是否有重复值得三种实用方法
Aug 16 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
Jun 05 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
Oct 29 Javascript
js数组的五种迭代方法及两种归并方法(推荐)
Jun 14 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
Vue三层嵌套路由的示例代码
May 05 Javascript
JS实现监控微信小程序的原理
Jun 15 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
Apr 17 Javascript
解决vue的过渡动画无法正常实现问题
Oct 31 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
建立文件交换功能的脚本(三)
2006/10/09 PHP
基于mysql的bbs设计(二)
2006/10/09 PHP
利用PHP制作简单的内容采集器的原理分析
2008/10/01 PHP
php实现比较全的数据库操作类
2015/06/18 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
jQuery自定义事件的简单实现代码
2014/01/27 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
angular-ui-sortable实现可拖拽排序列表
2016/12/28 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
浅谈Vue.js路由管理器 Vue Router
2018/08/16 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
vue 在methods中调用mounted的实现操作
2020/08/07 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
跟老齐学Python之关于类的初步认识
2014/10/11 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
Python抓取框架 Scrapy的架构
2016/08/12 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
python实现电子书翻页小程序
2019/07/23 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
CSS3不透明度实例讲解
2016/04/26 HTML / CSS
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
.net工程师笔试题
2012/06/09 面试题
男方父母证婚词
2014/01/12 职场文书
汽车装潢店创业计划书范文
2014/02/05 职场文书
道路交通安全实施方案
2014/03/12 职场文书
2014年学生工作总结
2014/11/20 职场文书
2015大学生党员自我评价范文
2015/03/03 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS