Vue-09-过滤器的使用

第二节课随堂笔记

一、知识点部分

1. 过滤器的作用:为页面中数据进行添油加醋的功能
2. 过滤器分两种:局部过滤器、全局过滤器
3. 局部过滤器不需要独立创建,在当前组件中有一个属性:filters，首先声明过滤器，使用方式：{{数据|过滤器名字}}
4. 全局过滤器需要单独创建，Vue.filter(“过滤器名称”,fn())，首先声明过滤器，使用方式{{数据|过滤器名字}}

二、代码部分

		 //声明全局过滤器
		   Vue.filter("myReverse",function(value,arg){
			   return arg +  value.split("").reverse().join("");
		   })
		   
			var App = {
				data(){
					return{
						price:100,
						msg:"hello my filter"
					}
				},
				template:`
					<div>
						<input type="number" v-model="price" />	
						<h3>{{price|myFilterForMoney}}</h3>
						<h4>{{msg|myReverse('哈哈哈')}}</h4>
					</div>
				`,
				filters:{
					//1.声明过滤器
					myFilterForMoney:function(value){
						return "￥" + value
					}
				}
			};
			
			new Vue({
				el:"#app",
				components:{
					App
				},
				template:`<App/>`
			})