在线代码编辑器-开发工具-核心编程

<html>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Vue</title>
   <script src="https://www.hxstrive.com/cdn/libs/vue/2.7.16/vue.min.js"></script>
   
   
   <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>
</head>
<body>

<div id="app">
       <p>
           Ask a yes/no question: <input v-model="question">
       </p>
       <p>{{ answer }}</p>
   </div>

<script type="text/javascript">
       var app = new Vue({
           el: '#app',
           data: {
               question: '',
               answer: 'I cannot give you an answer until you ask a question!'
           },
           watch: {
               // 如果 `question` 发生改变，这个函数就会运行
               question: function (newQuestion, oldQuestion) {
                   this.answer = 'Waiting for you to stop typing...';
                   this.debouncedGetAnswer();
               }
           },
           created: function () {
               // `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
               // 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
               // AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
               // `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
               // 请参考：https://lodash.com/docs#debounce
               this.debouncedGetAnswer = _.debounce(this.getAnswer, 500);
           },
           methods: {
               // 获取答案
               getAnswer: function () {
                   // 如果问题中没有问号，则直接返回
                   if (this.question.indexOf('?') === -1) {
                       this.answer = 'Questions usually contain a question mark. ;-)';
                       return;
                   }

this.answer = 'Thinking...';
                   var vm = this;

// 通过 axios 调用接口
                   axios.get('https://yesno.wtf/api')
                       .then(function (response) {
                           vm.answer = _.capitalize(response.data.answer);
                       })
                       .catch(function (error) {
                           vm.answer = 'Error! Could not reach the API. ' + error;
                       });
               }
           }
       });
   </script>

</body>
</html>

在线代码编辑器 HTML / CSS / JavaScript 实时预览

自动执行

代码编辑区

字符数: 0 提示: 输入完整的 HTML 代码，需包含 DOCTYPE 声明与 html 根标签

预览效果