console
new Vue({
el:"#app",
data:{
question:"",
answer:"你要先提出问题,我才能给你答案!"
},
watch:{
question:function (newValue) {
this.answer = '等待输入停止...'
this.getAnswer()
}
},
methods: {
getAnswer: _.debounce(function () {
if (this.question.indexOf('?') == "-1") {
this.answer = "问题中一般需要含有中文问号"
return
}
this.answer = "思考中..."
var _t = this;
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;
}