文档章节

【MVVM】- Avalon 过滤器

ZeroneLove
 ZeroneLove
发布于 02/28 23:00
字数 418
阅读 1
收藏 0

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();
});

效果:

© 著作权归作者所有

ZeroneLove
粉丝 6
博文 164
码字总数 133695
作品 0
深圳
高级程序员
私信 提问
【MVVM】- AngularJS 过滤器用法

过滤器作用:对model的数据进行加工,按照相应的格式进行显示 AngularJS的过滤器和Avalon的用法差不多,一通百通。 currency 格式化数字为货币格式 filter 从数组项中选择一个子集 lowercas...

ZeroneLove
02/27
10
0
【MVVM】- Avalon 基础入门案例

Avalon 国产前端大神司徒正美借鉴knockout和angularJS的基础上开发的mvvm框架,avalon相比knockout和angularJS在运行效率和设备适配上面具有更大的优势,同时具备以上两种框架的部分特点 av...

ZeroneLove
02/28
13
0
【MVVM】- Avalon 常用指令用法

Avalon 常用指令 ms-visible、ms-if ms-visible:样式改变display:block ms-if 性能更高,若页面不显示则注释标记, ms-if 还做其他的逻辑控制 css样式 外观 js操作逻辑 效果: ms-duplex 双向...

ZeroneLove
02/28
20
0
【MVVM】- Avalon 数组操作

avalon 对象、对象数组、数组基本操作 界面 js操作逻辑 效果: avalon 数组升、降序 界面 js代码逻辑 效果: 数组成员元素动态创建 界面 js代码逻辑 效果:

ZeroneLove
02/28
7
0
【MVVM】- Avalon验证器duplexHooks

avalon验证器: 主要用来限定某些元素的格式输入 界面 Javascript操作代码: 效果图:

ZeroneLove
02/28
5
0

没有更多内容

加载失败,请刷新页面

加载更多

Knowage 6.2安装部署

注意:需要正确配置JAVA_HOME和JRE_HOME还有catalina_home,否则启动的时候tomcat一闪而过,想要获得报错信息,可以打开cmd,在dos命令行运行开始命令 官网:https://www.knowage-suite.com/s...

阿伦哥-
29分钟前
5
0
c++11 左值引用和右值引用

#include <iostream>using namespace std;void Print(string& s){ cout << s;}int main(){ string s="abc"; Print(s); // OK Print("abc"); // parse error......

SibylY
30分钟前
5
0
浅谈Facade外观模式

一、前言 外观模式是一种非常简单的模式,简单到我们经常都会使用,比如对于类A和B,如果两者需要交互,经过一定的处理过程才能实现某一个具体的功能,那么我们可以将这个处理的过程定义为一...

青衣霓裳
31分钟前
5
0
AnalyticDB for PostgreSQL 6.0 新特性介绍

阿里云 AnalyticDB for PostgreSQL 为采用MPP架构的分布式集群数据库,完备支持SQL 2003,部分兼容Oracle语法,支持PL/SQL存储过程,触发器,支持标准数据库事务ACID。ADB PG通过行存储、列存...

Mr_zebra
33分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部