<template>
<div>
<span>SearchByName: </span>
<input v-model="text"><button type="button" name="button" @click="add">查找</button>
<table border="1" >
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr v-for = "item in newTableList">
<td>{{item.name}}</td>
<td>{{item.sex}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return{
text: '',
msg:"",
tableList:[
{name:"華仔",sex:"男",age:10},
{name:"作別",sex:"女",age:20},
{name:"哈嘍",sex:"男",age:30},
{name:"HTML",sex:"女",age:40},
{name:"我愛羅",sex:"男",age:50},
]
}
},
computed: {
newTableList() {
return this.tableList.filter((user)=>{
return user.name.toLowerCase().indexOf(this.msg.toLowerCase()) !== -1;
})
}
},
methods:{
add(){
this.msg = this.text;
}
}
};
</script>
<style media="screen" scoped>
td,th{
padding:10px;
}
table{
text-align: center;
}
</style>
vue2.0自定義過濾器—搜索
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
推薦閱讀更多精彩內容
- 關于$filter的自定義過濾器。要是定義在moduler內部使用自定義函數的方式，那么傳入該函數的是object...
- 組件模板代碼寫法 多個元素的書寫 問題小結: 組件外面必須有一個根元素包裹(1.0可直接書寫) 組件定義 小結:組...
- 生命周運算期鉤子 所有的生命周期鉤子自動綁定 this 上下文中的實例訪問數據對屬性和方法進行不能使用es6中的箭...
