vue 内置过滤器的使用总结(附加自定义过滤器)

lili: ["oi", "oa", "ll", "lo" ,"ouo" ,"kk" ,"oala"],
man: [ //此处注意man是数组,不是对象
{name: "lily"},
{name: "lucy"},
{name: "oo"},
{dada: "lsh"},
{dada: "ofg"}
] }
})
</script>

orderBy(排序)

1) 限制:需在v-for(即数组)里面使用

第一个参数: {String | Array | Function} 需要搜索的字符串

第二个参数: {String} 可选参数 order 决定结果升序（order >= 0）或降序（order < 0）,默认是升序

<div class="test">
 遍历数组
 <ul v-for="item in lili | orderBy 'o' 1">
 <li>{{item}}</li>
 输出kk ll oi
 </ul>
 <ul v-for="item in lili | orderBy 'o' -1">
 <li>{{item}}</li>
 输出oi ll kk
 </ul>
 遍历含对象的数组
 <ul v-for="item in man | orderBy 'name' 1">
 <li>{{item.name}}</li>
 输出Bruce Chuck Jackie
 </ul>
 <ul v-for="item in man | orderBy 'name' -1">
 <li>{{item.name}}</li>
 输出Jackie Chuck Bruce
 </ul>
 使用函数排序
 <ul v-for="item in man | orderBy ageByTen">
 <li>{{item.name}}</li>
 输出Bruce Chuck Jackie
 </ul>
</div>
<script type="text/javascript">
 var myVue = new Vue({
 el: ".test",
 data: {
  lili: ["oi", "kk", "ll"],
  man: [ //此处注意man是数组,不是对象
  {
  name: 'Jackie',
  age: 62
  },
  {
  name: 'Chuck',
  age: 76
  },
  {
  name: 'Bruce',
  age: 61
  }
 ] },
 methods: {
  ageByTen: function () {
  return 1;
  }
 }
 })
</script>

自定义过滤器

<div class="test">
 {{'2018-11-16 18:12:15'|formatDate}}
</div>
<script type="text/javascript">
 var myVue = new Vue({
 el: ".test",
 methods: {
 },
 filters:{
  formatDate (val) {
  return moment(val).format('YYYY-MM-DD');
  // 这里用到了moment.js
  }
 }
 })
</script>