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 相关文章推荐
juqery 学习之六 CSS--css、位置、宽高
Feb 11 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
Jun 07 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
slideToggle+slideup实现手机端折叠菜单效果
May 25 Javascript
jQuery简单绑定单个事件的方法示例
Jun 10 jQuery
node.js利用socket.io实现多人在线匹配联机五子棋
May 31 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
微信小程序实现的一键连接wifi功能示例
Apr 24 Javascript
微信小程序实现禁止分享代码实例
Oct 19 Javascript
JavaScript的console命令使用实例
Dec 03 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 网页过期时间的控制代码
2009/06/29 PHP
php数组的一些常见操作汇总
2011/07/17 PHP
解析PHPExcel使用的常用说明以及把PHPExcel整合进CI框架的介绍
2013/06/24 PHP
php获取随机数组列表的方法
2014/11/13 PHP
php判断对象是派生自哪个类的方法
2015/06/20 PHP
PHP使用自定义方法实现数组合并示例
2016/07/07 PHP
Yii统计不同类型邮箱数量的方法
2016/10/18 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
javascript使用数组的push方法完成快速排序
2014/09/15 Javascript
jQuery中:input选择器用法实例
2015/01/03 Javascript
js实现延时加载Flash的方法
2015/11/26 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
JS验证逗号隔开可以是中文字母数字
2016/04/22 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
jQuery之动画效果大全
2016/11/09 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
python操作sqlite的CRUD实例分析
2015/05/08 Python
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
django 快速启动数据库客户端程序的方法示例
2019/08/16 Python
Django模板之基本的 for 循环 和 List内容的显示方式
2020/03/31 Python
Python restful框架接口开发实现
2020/04/13 Python
创业计划书中包含的9个方面
2013/12/26 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
蜗居观后感
2015/06/11 职场文书
2015少先队大队辅导员工作总结
2015/07/24 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python