Home > Developer > JavaScript
Vue 1.x interactive implementation similar to Baidu drop-down list example, vue1.x
0. Preface
Vue itself does not support interaction. to interact, you must introduce the ajax module. The vue team provides a new library file called vue-resource.js.
Network CDN: https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.js
1. Usage Classification
Ajax interactions are generally divided into three types: get, post, and jsonp.
Code in the html part: the data of the array myData is displayed in the ul list, using the "v-for" command
<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 "> no data </p> </div> </body>
1) get request
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 request
Methods: {get: function () {this. $ http. post ('search', {wd: this. m },{ emulateJSON: true, // 3rd parameters are added to the get request }). then (function (res) {this. myData = res. body;}, function (res) {console. log ('err --- '); // alert (2) // this. myData = ['aaa', 'a111', 'a222'] ;})}
In the background Project, the debugging result is as follows:
Enter the keyword "a" and go to the breakpoint to get the data:
3) jsonp can send cross-origin requests, but it is not used much.
2. Summary:
This article requires that you understand how to write get and post requests. The v-model is bound to data in two directions. In the list, use v-for to display the data in the array. The v-show is followed by the condition to control whether the data is displayed.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
