1. 程式人生 > >vue中limitBy,filterBy,orderBy的用法

vue中limitBy,filterBy,orderBy的用法

dex arr lte ora mount ron data erb type

1.limitBy的用法

<body>
<div id="box">
<ul>
<li v-for="val in arr | limitBy 2 1"> <!-- 從index=1的位置取兩個-->
{{val}}
</li>
</ul>
</div>
<script>

var vm=new Vue({
data:{
arr:[1,2,3,4,5]
},
methods:{

}
}).$mount(‘#box‘);

</script>

2 filterBy的用法:篩選中數組中含有a字母的值

<body>
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | filterBy a">
{{val}}
</li>
</ul>
</div>
<script>

var vm=new Vue({
data:{
arr:[‘width‘,‘height‘,‘background‘,‘orange‘],
a:‘‘
},
methods:{

}
}).$mount(‘#box‘);

</script>
</body>

3 orderBy的用法

<body>
<div id="box">
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | orderBy a">
{{val}}
</li>
</ul>
</div>
<script>

var vm=new Vue({
data:{
arr:[‘width‘,‘height‘,‘background‘,‘orange‘],
a:‘‘
},
methods:{

}
}).$mount(‘#box‘);

</script>
</body>

vue中limitBy,filterBy,orderBy的用法