vue 1.x 互動實現仿百度下拉式清單樣本，vue1.x

vue 1.x 互動實現仿百度下拉式清單樣本，vue1.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 後面接條件控制資料顯示與否

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。