suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der interaktiven Implementierung einer Baidu-ähnlichen Dropdown-Liste in vue 1.x

Detaillierte Erläuterung der interaktiven Implementierung einer Baidu-ähnlichen Dropdown-Liste in vue 1.x

小云云
小云云Original
2018-01-04 10:41:581254Durchsuche

Vue selbst unterstützt keine Interaktion. Wenn Sie interagieren möchten, müssen Sie das Ajax-Modul einführen. Das Vue-Team stellt eine neue Bibliotheksdatei namens vue-resource.js bereit. In diesem Artikel wird hauptsächlich das Beispiel der Nachahmung der Baidu-Dropdown-Liste in Vue 1 vorgestellt. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

1. Nutzungsklassifizierung

Ajax-Interaktion ist normalerweise in 3 Kategorien unterteilt: Get, Post, JSONP

HTML-Teil Code: Die Daten des Arrays myData werden über die ul-Liste mit dem Befehl „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 request 


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-Anfrage 


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;];
          })
          
        }}
Im Hintergrundprojekt lauten die Debugging-Ergebnisse wie folgt:

Nachdem Sie das Schlüsselwort „a“ eingegeben haben, geben Sie den Haltepunkt ein und erhalten Sie die Daten:

3) JSONP kann Cross- senden Domain-Anfragen und wird nicht oft verwendet. Ich werde hier nicht auf Details eingehen

2. Zusammenfassung:

Dieser Artikel erfordert die Beherrschung der Schreibmethode von get und Post-Anfragen, v-model bidirektionale Bindungsdaten, in der Liste. Verwenden Sie v-for, um die Daten des Arrays anzuzeigen, v-show gefolgt von Bedingungen, um zu steuern, ob die Daten angezeigt werden


Verwandte Empfehlungen:


Bootrap und Vue zur Nachahmung von Baidu Beispiel einer Suchfunktion

Detaillierte Erklärung, wie PHP und Ajax Baidu-Abfrage-Drop imitieren können- Inhalt herunterfahren

Teilen Sie einen Beispielcode von JavaScript, der die Baidu-Paging-Funktion imitiert

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der interaktiven Implementierung einer Baidu-ähnlichen Dropdown-Liste in vue 1.x. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Teilen Sie die internen Methoden übergeordneter Komponenten, die untergeordnete Komponenten aufrufen, in vue.jsNächster Artikel：Teilen Sie die internen Methoden übergeordneter Komponenten, die untergeordnete Komponenten aufrufen, in vue.js

In Verbindung stehende Artikel

Mehr sehen