vue 自定义过滤器

      vue2.0废弃了内置过滤器，允许自定义过滤器。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

<!-- 在双花括号中 --> {{ message | capitalize }} <!-- 在 `v-bind` 中 --> <div v-bind:id="rawId | formatId"></div>

单参数过滤器

Vue.filter('reverse', function (value) { return value.split('').reverse().join('')； }) <span v-text="msg | reverse"></span>

注册了一个字符串反转输出的过滤器。

多参数过滤器

Vue.filter('warp', function (value,begin,end) { return begin + value + end； }) <span v-text="msg | warp('start','end')"></span>

msg作为第一个参数传入，start和end分别为第二个和第三个参数传入。

动态参数过滤器

如果参数没有被引号包起来，则他会在当前vm作用域内计算，过滤器this始终指向调用它的vm。

Vue.filter('warp', function (value,input) { return value + input； }) <input v-model='input'> <span v-text="msg | warp(input)"></span>

双向过滤器

上面介绍的都是model数据输出到view之前进行数据转化的，vue还支持来自视图的值写回模型前进行转化。下面请看这个例子。

Vue.filter('example', { // model --> view read: function (value) { return 'read' + value; }, // view --> model write: function (value) { return value + 'write'; } }) <div id='example'> <p>{{ msg }}</p> <input type='text' v-model='msg | example'> </div> let example = new Vue({ el:'#example', data:{ msg:'hello' } });