SOURCE

console 命令行工具 X clear

                    
>
console
new Vue({
  el:"#app",
  data:{
    question:"",
    answer:"你要先提出问题,我才能给你答案!"
  },
  watch:{
    question:function (newValue) {
      this.answer = '等待输入停止...'
      this.getAnswer()
    }
  },
  methods: {
    // _.debounce(function() {},500) 
    // _.debounce 是由 lodash 提供的函数,在运行特别消耗性能的操作时,可以使用 _.debounce 来限制频率,效果与setTimeout一致。
    getAnswer: _.debounce(function () {
      if (this.question.indexOf('?') == "-1") {
        this.answer = "问题中一般需要含有中文问号"
        return
      } 
      this.answer = "思考中..."
      
      var _t = this;
      // axios是基于Promise 用于浏览器和nodejs的HTTP客户端,可用来发送ajax请求
      axios.get('https://yesno.wtf/api')
      	.then(function (response) {
        	_t.answer = _.capitalize(response.data.answer)
      	})
      	.catch(function (error) {
        	_t.answer = "错误!API无法处理。" + error
      	})
    },500)
  }
})
<div id="app">
  <p>
    问一个答案是Yes/No的问题:
    <input type="text" v-model="question"/>
  </p>
  <p>{{ answer }}</p>
</div>

<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>
html,body{
  background-color:#333;
  color:#fff;
}