vue实现搜索功能 |
您所在的位置：网站首页 › vue搜索功能 › vue实现搜索功能 |
vue实现搜索功能
开源之夏第三届火热来袭，高校学生参与赢万元奖金！>>>
vue实现搜索功能
template 部分
返回
搜索
{{item.contact_name}}
{{item.address}}
{{item.phone}}
{{item.contact_name}}
{{item.address}}
{{item.phone}}
JS 部分
import { mapGetters } from "vuex";
import api from "../../api/axiosConfig.js";
export default {
data() {
return {
search: "",
// 原本展示数据
list: [],
// 搜索后的展示数据
searchData: []
};
},
components: {},
computed: {
...mapGetters(["getAddressList", "getLoginUser"])
},
created() {
// 获取的接口数据
this.getList();
},
mounted() {},
methods: {
goback() {
this.$router.go(-1);
},
// 获取接口中数据的方法
getList() {
let params = {
id: this.getLoginUser.id,
token_sc: this.getLoginUser.token_sc
};
api.AddressList(params).then(res => {
// list 就是原始数据
this.list = res.data;
});
},
Search() {
// search 是 v-model="search" 的 search
var search = this.search;
if (search) {
this.searchData = this.list.filter(function(product) {
// 每一项数据
// console.log(product)
return Object.keys(product).some(function(key) {
// 每一项数据的参数名
// console.log(key)
return (
String(product[key])
// toLowerCase() 方法用于把字符串转换为小写。
.toLowerCase()
// indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
.indexOf(search) > -1
);
});
});
}
}
}
};
看看效果
这是初始样式
看看输入内容，搜索之后的
但是，如果输入栏没了内容，下面啥也不显示里，那我来加工一下
|
【本文地址】
今日新闻 |
推荐新闻 |