我可以撰寫僅包含資料和方法功能的過濾器搜索代碼嗎？
我嘗試這樣做：
var fil = new Vue ({
el: '#app',
data: {
search: '',
proL: ['css', 'c ', 'cs#'],
},
methods: {
filter: function(){
var search_key = this.search.val();
this.proL.filter(function(){
this.proL.toggle(this.proL.text().indexOf(search_key) > -1);
});
}
}
});
這是 html 代碼
<div id="app">
<div >
<input @keyup="filter()" type="text" v-model="search" placeholder="Search title.."/>
</div>
<div id="pro">
<h4 v-for="item in proL">{{item}}</h4>
</div>
</div>
????
uj5u.com熱心網友回復：
更好的方法是使用computed處理程式
new Vue({
el: '#demo',
data: {
search: '',
proL: ['css', 'c ', 'cs#'],
},
computed: {
filteredProL(){
if(this.search === '') return this.proL; // If search input is empty then display all items
else return this.proL.filter(e => e.toLowerCase().indexOf(this.search) > -1) // Working logic
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div >
<input type="text" v-model="search" placeholder="Search title.."/>
</div>
<div id="pro">
<h4 v-for="item in filteredProl">{{item}}</h4>
</div>
</div>uj5u.com熱心網友回復：
嘗試使用computed屬性來定義過濾的專案并使用箭頭函式作為filter函式回呼以訪問this：
new Vue({
el: '#demo',
data: {
search: '',
proL: ['css', 'c ', 'cs#'],
},
computed: {
filtered(){
return this.proL.filter(e => e.toLowerCase().includes(this.search.toLowerCase()))
}
}
})
Vue.config.productionTip = false
Vue.config.devtools = false<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<div >
<input type="text" v-model="search" placeholder="Search title.."/>
</div>
<div id="pro">
<h4 v-for="item in filtered">{{item}}</h4>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/348554.html
標籤：javascript html Vue.js 筛选
下一篇：我的背景影像屬性沒有正確連接