【MVVM】- Avalon 过滤器

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

ms-controlle作用:当页面事先加载而页面并未完全渲染完成时自动隐藏目标显示域,待数据完全显示时avalon会自动取消样式,达到遮挡初始静态页面的显示效果

css样式

.ms-controller{ 
visibility:hidden;
}

界面

{{aaa|html}}
{{bbb|uppercase}}
{{ccc|lowercase}}
{{ddd|truncate(5,'00')}}
{{eee|camelize}}
{{fff|currency('$')}}
{{ggg|number(2)}}
{{ggg|number(2,".")}}
{{ggg|number(2,".",",")}}

{{new Date|date("yyyy MM dd HH:mm:ss a")}}
{{"2011-07-08"|date("EEE MMM dd yyyy")}}
{{"1373021259229"|date("yyyy年MM月dd日")}}
{{"1373021259229"|date("yyyy-MM-dd HH:mm:ss a")}}

USD:{{"USD"|parseSymbol}}

js操作逻辑

avalon.filters.parseSymbol=function(str){
	return{
		'元':'元',
		'USD':'美元',
		'HKD':'港元'
	}[str];
}

avalon.ready(function(){
	//avalon过滤器可以嵌套,过滤器可以自定义:str表示需要过滤的字符
	//功能将字符串转换为相应的名字

	
	avalon.define({
		$id:"filter",
		aaa:"hello avalon!",
	    bbb:"字母大写化:hello avalon!",
	    ccc:"字母小写化:HELLO AVALON!",
	    ddd:"字符串截断处理",
	    eee:"驼峰处理:abc-def-hig",
	    fff:"2255",
	    ggg:"546345.541343",
	    
	});
	avalon.scan();
});

效果:

【MVVM】- Avalon 过滤器_第1张图片

转载于:https://my.oschina.net/yangzhiwei256/blog/3016407

你可能感兴趣的:(【MVVM】- Avalon 过滤器)