首頁 > 文章 > web前端 > vue 1.x 互動實作仿百度下拉清單詳解

vue 1.x 互動實作仿百度下拉清單詳解

小云云原創: 2018-01-04 10:41:581225瀏覽

vue 本身不支援交互，想要做交互，必須引入ajax 模組。 vue 團隊提供一個新的函式庫檔案叫做 vue-resource.js 。本文主要介紹了vue 1.x 互動實作仿百度下拉列表範例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。

1、用法分類

ajax 互動通常分為3類，get,post,jsonp

html 部分的程式碼：陣列myData 的資料透過ul 列表顯示出來，用"v-for"指令

<body> 
    <p id="box">
      <input type="text" value="" v-model="m" @keyup="get()">
      {{m}}<br/>
      {{msg}}<br/>
      {{&#39;welcome&#39;|uppercase}}
      <ul>
        <li v-for="value in myData">
          {{value}}
        </li>
      </ul>
      <p v-show="myData.length == 0">暂无数据</p>
    </p> 
</body>

1) get 請求

methods:{
  get: function(){
    this.$http.get(&#39;search&#39;,{
      wd:this.m
  }).then(function(res){
  this. myData= res.body
  },function(res){
  console.log(res.status)
})
}
  }

2)post 請求

methods:{get : function () {
          this.$http.post(&#39;search&#39;,{
            wd:this.m
          },{
            emulateJSON:true,   //在get 请求的基础上添加了第3个参数
          }).then(function(res){
            this.myData=res.body;
          },function(res){
            console.log(&#39;err---&#39;);
            // alert(2)
            //this.myData = [&#39;aaa&#39;, &#39;a111&#39;, &#39;a222&#39;];
          })
          
        }}

在背景專案中，偵錯執行結果如下：

輸入關鍵字「a」後，進入斷點，取得資料：

3）jsonp 能夠發送跨域請求，用的不多，不在此贅述

2、總結：

本片文章要求掌握get 和post 請求的寫法，v-model 雙向綁定數據，列表中運用v－for顯示數組的數據，v-show 後接條件控制數據顯示與否

vue 1.x 互動實作仿百度下拉清單詳解

相關文章