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

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'];
          })

        }}

在后台项目中，调试运行结果如下：

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

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

2、总结：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)

    在开发过程中,为了效果好看,往往需要自己开发一个下拉列表,而不是使用 HTML 自身的 select 下拉列表.然而当编写自定义下拉列表的时候,就会碰到一个问题:如果用户在下拉列表的范围外进行鼠标点击的操作,如何关闭已经打开的下拉列表? 解决思路如下:在 DOM 的根节点上添加一个 click 事件,同时下拉列表内阻止事件的默认行为和冒泡.当响应这个点击事件的时候,说明是在下拉列表范围外的点击(因为下拉列表内阻止了事件的冒泡),就可以关闭已经打开的下拉列表. 如果是纯 JS 代码,有人可能会使用

  • vue表单绑定实现多选框和下拉列表的实例

    在vue的实际开发过程中,我们如何将以选中的值直接渲染到页面中,这次主要说的是多选框和下拉列表的实现: <label>测试多选渲染:</label> <div> <template v-for="item in chks"> <input type="checkbox" name="hobby" :value="item.id" :checked="loopsss

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

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

    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=&qu

  • vue实现百度下拉列表交互操作示例

    vue实现百度下拉列表交互操作示例

    本文实例讲述了vue实现百度下拉列表交互操作.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue百度下拉列表</title> <style> .gray{ background: #ccc; } </style> &l

  • 使用Bootrap和Vue实现仿百度搜索功能

    使用Bootrap和Vue实现仿百度搜索功能

    用Vue调用百度的搜索接口,实现简单的搜索功能. 搜索框的样式是基于Bootstrap,当然对样式做了简单的调整, 使之类似于百度搜索.代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>百度搜索</title> <style type="text/css"> .gray{ background-color

  • 使用 Vue.js 仿百度搜索框的实例代码

    整理文档,搜刮出一个使用 Vue.js 仿百度搜索框的实例代码,稍微整理精简一下做下分享. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue demo</title> <style type="text/css"> .bg { background: #ccc; } </style> <s

  • Vue 仿百度搜索功能实现代码

    无上下选择 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jsonp</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, us

  • vue之数据交互实例代码

    vue中的交互(ajax,jsonp) vue中也存在像ajax和jsonp的数据交互,实现向服务器获取数据,但是他本身框架当中没有这样的方法,需要一个新的小东西叫vue-resouce.js 地址:https://github.com/pagekit/vue-resource/blob/master/README.md <meta charset="UTF-8"> <title>Document</title> <script type=&q

  • 基于vue2.0实现仿百度前端分页效果附实现代码

    前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前设定哪些参数需要暴露出来给父组件传递 <Paging :name="name" @change="onPageChange" :page-size="size" :total="total" layout="jum

  • php+ajax实现仿百度查询下拉内容功能示例

    php+ajax实现仿百度查询下拉内容功能示例

    本文实例讲述了php+ajax实现仿百度查询下拉内容功能.分享给大家供大家参考,具体如下: 运行效果如下: html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/jquer

  • PHP实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)

    本文实例讲述了PHP实现仿百度文库,豆丁在线文档效果.分享给大家供大家参考,具体如下: 由于项目要实现类似百度文库的功能,又是我一个人做的项目,所以就想到找免费的现成的来使用.在网上找到的都是一样的.如下: Flash Paper支持Office文档(.doc,.xls,.ppt)直接转换为PDF或SWF,速度很快,效果较好.可惜,Flash Paper V2.2后没有再更新了.安装Flash Paper后,可以直接使用命令调用FlashPrinter.exe,实现批量转换. 例如:C:\Fla

  • vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)

    vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)

    本文介绍了vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动) 先去下载一个"省份.城市.区县.乡镇" 四级联动数据,然后 引入 import { Picker } from 'mint-ui'; //前提是npm install mint-ui -S Vue.component(Picker.name, Picker); 组件使用 <mt-picker :slots="addressSlots" class="picke

随机推荐