四、 vue 过滤器

vue.js允许自定义过滤器，可被用作一些常见的文本格式化，过滤器可以用在两个地方，插值表达式和v-bind表达式，过滤器应该被添加在javascript表达式的尾部，由管道符指示。

过滤器调用时候的格式：

{{ name | 过滤器的名称 }}

过滤器的定义语法：

Vue.filter('过滤器的名称', function(){})

过滤器中的 function ，第一个参数，已经被规定死了，永远都是 过滤器 管道符前面 传递过来的数据
    Vue.filter('过滤器的名称', function (data) {
      return data + '123'
    })

 

全局过滤器实例：

 <div id="app">
    <p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p>
  </div>
 <script src="./lib/vue-2.4.0.js"></script>
  <script>
    // 定义一个 Vue 全局的过滤器，名字叫做  msgFormat
    Vue.filter('msgFormat', function (msg, arg, arg2) {
      // 字符串的  replace 方法，第一个参数，除了可写一个 字符串之外，还可以定义一个正则
      return msg.replace(/单纯/g, arg + arg2)
    })

    Vue.filter('test', function (msg) {
      return msg + '========'
    })


    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
      },
      methods: {}
    });
  </script>

 

私有过滤器

	<div id="app">
			<p>{{ msg | msgFormat |test }}</p>
		</div>
	</body>
	<script type="text/javascript" src="vue.js"></script>
	<script>
	
		var vm=new Vue({
			el:'#app',
			data:{
				msg:'曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人'
			},
			filters:{// 定义私有过滤器    过滤器有两个 条件  【过滤器名称 和 处理函数】
			// 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器
				test:function(msg){
					return msg+1;
				 },
				msgFormat:function(msg){
						return msg.replace(/单纯/g,'邪恶')
				}
			}
		})
	</script>