本文實(shí)例為大家分享了vue實(shí)現(xiàn)搜索過濾效果的具體代碼，供大家參考，具體內(nèi)容如下
成都創(chuàng)新互聯(lián)公司長期為1000多家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為遂昌企業(yè)提供專業(yè)的成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)，遂昌網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
html：
| 名稱 | 鏈接狀態(tài) | IP | 特例類型 | 所屬城市 | 所屬機(jī)房 |
|---|---|---|---|---|---|
| {{item.name}} | {{item.username}} | {{item.email}} | {{item.sex}} | {{item.province}} | {{item.hobb}} |
css:
重慶分公司
重慶分公司
[v-cloak] {
display: none
}
table {
border: 1px solid #ccc;
padding: 0;
border-collapse: collapse;
table-layout: fixed;
/*margin-top: 10px;*/
width: 100%;
margin-top: 45px;
}
table td,
table th {
height: 30px;
border: 1px solid #ccc;
background: #fff;
font-size: 2vh;
padding: 12px 3px 6px 8px;
color: #666666;
font-weight: 300;
}
table th:first-child {
width: 4rem;
}
.container,
.st {
/*width: 1000px;*/
margin: 10px auto 0;
font-size: 13px;
font-family: '微軟雅黑'
}
.container .search {
font-size: 15px;
padding: 4px;
}
.container .add {
padding: 5px 15px;
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 6;
background: rgba(0, 0, 0, 0.7);
}
.overlay td:first-child {
width: 8rem;
}
.overlay .con {
position: absolute;
/*width: 420px;*/
min-height: 300px;
background: #fff;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
/*margin-top: -150px;*/
padding: 20px;
}
.span_1{
font-size: 18px;
color: #666666;
}
js:
Vue.component('model', {
template: '',
props: ['list', 'isactive'],
computed: {
modifylist() {
return this.list;
}
},
methods: {
changeActive() {
this.$emit('change');
},
modify() {
this.$emit('modify', this.modifylist);
},
add(){
}
}
});
var app = new Vue({
el: '#app',
data: {
isActive: false,
selected: -1,
selectedlist: {},
slist: [],
searchlist: [],
list: [
{
name:'Fe1',
username: '開',
email: '221.122.62.221',
sex: '特例1',
province: '北京',
hobb:'電子機(jī)房'
},
{
name:'Fe2',
username: '關(guān)',
email: '192.168.12.222',
sex: '特例2',
province: '上海',
hobb: '服務(wù)機(jī)房'
},
{
name:'Fe3',
username: '開',
email: '127.255.255.255',
sex: '特例3',
province: '重慶',
hobb: '遙控機(jī)房'
},
{
name:'Fe4',
username: '關(guān)',
email: '223.255.255.255',
sex: '特例4',
province: '北京市',
hobb:'內(nèi)網(wǎng)機(jī)房'
}
]
},
created() {
this.setSlist(this.list);
},
methods: {
// 修改數(shù)據(jù)
showOverlay(index) {
this.selected = index;
this.selectedlist = this.list[index];
this.changeOverlay();
},
// 點(diǎn)擊保存按鈕
modify(arr) {
if (this.selected > -1) {
Vue.set(this.list, this.selected, arr);
this.selected = -1;
} else {
this.list.push(arr);
}
this.setSlist(this.list);
this.changeOverlay();
},
del(index) {
this.list.splice(index, 1);
this.setSlist(this.list);
},
changeOverlay() {
this.isActive = !this.isActive;
},
// 獲取需要渲染到頁面中的數(shù)據(jù)
setSlist(arr) {
this.slist = JSON.parse(JSON.stringify(arr));
},
// 搜索
search() {
var v = $('.search').val(),
self = this;
self.searchlist = [];
if (v) {
var ss = [];
// 過濾需要的數(shù)據(jù)
this.list.forEach(function (item) {
if (item.province.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.province) == -1) {
self.searchlist.push(item.province);
}
ss.push(item);
} else if (item.hobb.indexOf(v) > -1) {
if (self.searchlist.indexOf(item.hobb) == -1) {
self.searchlist.push(item.hobb);
}
ss.push(item);
}
});
this.setSlist(ss); // 將過濾后的數(shù)據(jù)給了slist
} else {
// 沒有搜索內(nèi)容，則展示全部數(shù)據(jù)
this.setSlist(this.list);
}
}
},
watch: {
}
})以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
