分享最實(shí)用的技術(shù),創(chuàng)造更大的價(jià)值

vue循環(huán)v-for通過(guò)computed添加過(guò)濾篩選條件filter傳參的方法

vue循環(huán)v-for通過(guò)computed添加過(guò)濾篩選條件filter傳參的方法

創(chuàng)軟小程序開(kāi)發(fā)團(tuán)隊(duì)在進(jìn)行小程序開(kāi)發(fā)過(guò)程中,通過(guò)vue的v-for循環(huán)時(shí),需要進(jìn)行數(shù)據(jù)篩選條件,經(jīng)查,可以通過(guò)vue計(jì)算屬性computed方法內(nèi)傳參的方式,進(jìn)行filter過(guò)濾,創(chuàng)軟小程序定制開(kāi)發(fā)團(tuán)隊(duì)整理了可用的代碼供參考交流。


1, .vue 文件

<view v-for="(item, index) in DataList_filter(需要傳入的值)" :key="index">
</view>

2, computed

<script>
	export default {
	    data() {
			return {
				
				DataList: []
			}
		},
		computed:{
			ProductList_filter() {
				let _this=this;
				  return function (_value) {
					 let vDataList = _this.DataList.filter(item=>item.pid === _value).reverse();
					 return vDataList;
				  }
			  }
		
		}
	}
</script>


此方法利用了vue的閉包傳值。


經(jīng)過(guò)創(chuàng)軟小程序開(kāi)發(fā)團(tuán)隊(duì)測(cè)試,可以用 v-if 達(dá)到同樣效果,如下代碼:

<view v-for="(item, index) in DataList" :key="index"
    v-if="item.pid === '驗(yàn)證值'">
</view>



聯(lián)系
QQ
電話
咨詢電話:189-8199-7898
TOP