Vue学习02-过滤器

Vue 过滤器

过滤器的基本使用

<div id="root">
			<!-- 1、过滤器要定在filters下，本质是一个函数
				   2、在过滤器函数中一定要有返回值
				   3、在过滤器形参中 ，可以获取到管道符前未处理的值
				-->
			<!-- 过滤器常用于文本格式化，1、插值表达式 -->
			 <!-- 把message的值当作参数传递给 ｜（管道符） 号后面的 capitalize 渲染出来的结果是 capitalize 处理后的结果-->
			 <p>{{message | capi}}</p>
			 <!-- 2、v-bind属性绑定 -->
			 
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#root",
				data:{
					message:'hello vue.js'
				},
				//过滤器函数必须定义在filters,过滤器中一定要有返回值
				filters:{
					capi:function(val){
						return val.substring(0,1).toUpperCase()+val.substring(1)
						// return this.message.substring(0,1).toUpperCase() + this.message.substring(1)
					}
				}
			})
		</script>

私有过滤器与全局过滤器

	<div id="root">
			 <p>{{message | capi}}</p>
			 <!-- 定在Vue对象里面的均为私有过滤器 -->
		</div>
		<script type="text/javascript">
      //si
		//第一个参数是过滤的名字，第二个参数是过滤器的处理函数 (val是管道符未处理的数据值)
		//如果全局过滤器与私有过滤器名字一致。采用就近原则
      
			Vue.filter("capi",function(val){
				return val.substring(0,1).toUpperCase()+val.substring(1)
			})
			new Vue({
				el:"#root",
				data:{
					message:'hello vue.js'
				}
			})
		</script>

过滤器的其他用途

<div id="root">
			<!-- 可以添加多个过滤器。 -->
			 <p>{{message | capi | fz }}</p>
			 <!-- 过滤器传递参数 ,参数带‘’号-->
			 <p>{{message|filterA('a1','a2')}}</p>
		</div>
		<script type="text/javascript">
			//首字母大写过滤器
			Vue.filter("capi",function(val){
				return val.substring(0,1).toUpperCase()+val.substring(1)
			}),
        //反正内容过滤器
			Vue.filter("fz",function(val){
				return val.split('').reverse().join('')
			})
			//传递参数过滤器
			// （第一个值为管道前的值，第二个值是传入的a1,第三个值是传入的a2）
			Vue.filter("filterA",function(msg,val1,val2){
				console.log(msg,val1,val2)
				return msg+val1+val2
			})
			new Vue({
				el:"#root",
				data:{
					message:'hello vue.js'
				}
			})
		</script>