First, introduce the Vue package:
<script src= "Https://cdn.jsdelivr.net/npm/vue/dist/vue.js" ></script>
In addition to introducing VUE packages, this case also requires the introduction of a third party package:
<!--because the ecology of AJAX libraries and general-purpose tools is already quite rich, Vue core code does not duplicate--> <!--provide these features to stay streamlined. This also allows you to freely choose the tools you are more familiar with. -->
<script src= "Https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js" ></script> <script Src= "Https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js" ></script>
First we find an interface:
Https://yesno.wtf/api
The interface is to provide a JSON interface that returns the answer to the question yes or no and the corresponding dynamic graph
The HTML structure is as follows:
<body>
<div id= "Watch-example" >
<p>
An answer can only be yes/no question:
<input type= "text" V-model= "question"/>
</p>
<p>
{answer}}<br>
</p>
<!--no:https://yesno.wtf/assets/no/21-05540164de4e3229609f106e468fa8e7.gif-->
<!--Yes:https ://yesno.wtf/assets/yes/7-653c8ee5d3a6bbafd759142c9c18d76c.gif-->
</div>
</body>Then we create a Vue instance and use the watch to listen to the input box. If a change occurs, the request is initiated to the HTTPS://YESNO.WTF/API and the JSON string that is responding is processed.
<script> var watchexamplevm = new Vue ({el: ' #watch-example ', data:{question: ',
Answer: ' No problem how do I answer? ' watch:{//If question changes, this function will run Question:function () {this.answer = ' etc
Pending closure '; Call Method This.getanswer ()}}, methods:{//' _.debounce ' is a through Lodas
H a function that limits the frequency of operations. In this example, we want to restrict access to YESNO.WTF/API//AJAX requests until the user is finished typing.
For more information on//' _.debounce ' functions (and their close relatives ' _.throttle '),//Please refer to: https://lodash.com/docs#debounce Getanswer: _.debounce (function () {if (This.question.indexOf ('? ') = = 1) {This . Answer = ' problem usually has a tag.
;-)';
return} This.answer = ' thinking ';
var vm = this;
Axios.get (' Https://yesno.wtf/api '). Then (function (response) { Vm.answer = _.capitalize (response.data.answer);
var img = document.getelementsbytagname ("img") [0];
Used to replace the picture img.src = Response.data.image; ). catch (function (error) {vm.answer = ' error, cannot capture API. ' + error} '//Decision User stops entering milliseconds to wait}}) </script>
The results of the operation are as follows:
When the input band? (English) question. Will issue a request
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
