【MVVM】- Avalon 过滤器

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

css样式

.ms-controller{ 
visibility:hidden;
}

界面

<div ms-controller="filter">
<span>{{aaa|html}}</span><br>
<span>{{bbb|uppercase}}</span><br>
<span>{{ccc|lowercase}}</span><br>

<!-- 表示从头开始截取5个字符,位数使用后面的字符串填充 -->
<span>{{ddd|truncate(5,'00')}}</span><br>
<span>{{eee|camelize}}</span><br>

<!-- 货币处理 -->
<span>{{fff|currency('$')}}</span><br>

<!-- 2:表示两位小数 
     .:表示小数点的形式
     ,:表示千分位的分隔符
-->
<span>{{ggg|number(2)}}</span><br>
<span>{{ggg|number(2,".")}}</span><br>
<span>{{ggg|number(2,".",",")}}</span><br><br>

<!-- 时间过滤器 -->
<span>{{new Date|date("yyyy MM dd HH:mm:ss a")}}</span><br>
<span>{{"2011-07-08"|date("EEE MMM dd yyyy")}}</span><br>
<!-- 时间戳转换 -->
<span>{{"1373021259229"|date("yyyy年MM月dd日")}}</span><br>
<span>{{"1373021259229"|date("yyyy-MM-dd HH:mm:ss a")}}</span><br><br>

<span>USD:{{"USD"|parseSymbol}}</span>
</div>

js操作逻辑

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

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

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

效果:

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值