天下之事，必先处之难，而后易之。

VueJS自定义过滤器:new Vue({filters:{filter1:function(){}....}})

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。

语法

<!-- 在两个大括号中 -->
{{ message | capitalize }}

<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

HTML将字符串转为大写

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize}}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return '';
      value = value.toString();
      return value.toUpperCase();
    }
  }
})
</script>
</body>
</html>

效果：

过滤器可以串联：

{{ message | filterA | filterB }}


过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

 

posted @ 2017-06-28 16:58  boonya  阅读(515)  评论(0)  编辑  收藏  举报
我有佳人隔窗而居，今有伊人明月之畔。
轻歌柔情冰壶之浣，涓涓清流梦入云端。
美人如娇温雅悠婉，目遇赏阅适而自欣。
百草层叠疏而有致，此情此思怀彼佳人。
念所思之唯心叩之，踽踽彳亍寤寐思之。
行云如风逝而复归，佳人一去莫知可回？
深闺冷瘦独自徘徊，处处明灯影还如只。
推窗见月疑是归人，阑珊灯火托手思忖。
庐居闲客而好品茗，斟茶徐徐漫漫生烟。

我有佳人在水之畔，瓮载渔舟浣纱归还。
明月相照月色还低，浅近芦苇深深如钿。
庐山秋月如美人衣，画堂春阁香气靡靡。
秋意幽笃残粉摇曳，轻轻如诉画中蝴蝶。
泾水潺潺取尔浇园，暮色黄昏如沐佳人。
青丝撩弄长裙翩翩，彩蝶飞舞执子手腕。
香带丝缕缓缓在肩，柔美体肤寸寸爱怜。
如水之殇美玉成欢，我有佳人清新如兰。
伊人在水我在一边，远远相望不可亵玩。