想问一下这个用竖线分隔开是什么意思

Question

<ul>

<li v-for="a in articles | searchFor searchStr">
    <a :href="a.url"><img :src="a.image" /></a>
    <p>{{a.title}}</p>
</li>

</ul>

现在有这样一段代码，想问一下，v-for里的竖线是什么意思，前后分隔开的参数又都是什么呢？

Answer 1

目测你这个是vue.js 1.x版本吧？

// v-for="a in articles"
// 相当于
for(var a in articles){
    // dosomething...
}

| 之后的参数是filter(过滤器):

<!-- 'hello' => 'before hello after' -->
<span v-text="message | wrap 'before' 'after'"></span>

Vue.filter('wrap', function (value, begin, end) {
  return begin + value + end
})

1.x 传送门：http://v1.vuejs.org/guide/cus...

注：2.x 中移除了filter ，传送门：http://cn.vuejs.org/v2/guide/...