-> 以下内容都是在 vue-cli 项目结构下的单文件组件进行的
<template>
<input v-model="param" @input="getResult">
<ul>
<li v-for="item in list">{{item.name}}</li>
</ul>
</template>>
data () {
return {
param: ``,
list: []
}
},
methods: {
// 首先定义请求数据方法
getResult () {
let url = `/api/search?code=${this.param}`
axios.get(url).then(res => {
if (res.data.code === `200`) {
this.list = res.data.data
}
})
},
// 主要节制方法
// 这里有一点要注意,debounce传入的第一个函数不要使用箭头函数
// 如果使用了箭头函数的话 this 的指向就改变了
debounceGetResult: _.debounce传入的第一个函数不要使用箭头函数(function () {
this.getResult()
// 500是多长时间后请求
}, 500)
},
watch: {
// 只要搜索内容发生变化,就调用请求接口
param (param) {
this.getResult()
}
}
上面还有一个点是_.debounce
,这个是lodash库的 api
如果有支持 es6的话可以在组件顶部直接引入
npm install lodash -save
...
import _ from 'lodash'
没有组件化的情况下直接通过script 标签引入即可
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
还有不懂的可以按照官网示例来写