码迷,mamicode.com
首页 > 其他好文 > 详细

vue中limitBy,filterBy,orderBy的用法

时间:2018-08-17 10:18:00      阅读:375      评论:0      收藏:0      [点我收藏+]

标签:div   limit   box   data   text   width   derby   val   ext   

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的用法

标签:div   limit   box   data   text   width   derby   val   ext   

原文地址:https://www.cnblogs.com/zhangzhiqin/p/9491614.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!