【MVVM】- Avalon 陣列操作

avalon 物件、物件陣列、陣列基本操作

介面

<body ms-controller="test">
<ul>
<li ms-repeat="object">{{$key}}-->{{$val}}</li>
</ul><br>
<button ms-click="changeObject">改變物件</button><br>

<ul>
<li ms-repeat="array">{{el}}</li>
</ul><br>
<button ms-click="changeArray">改變陣列</button><br>

<ul>
<li ms-repeat="objectArray">
{{el.aaa}}-->{{el.bbb}}-->{{el.ccc}}
</li>
</ul><br>
<button ms-click="changeObjectArray">改變物件陣列</button><br>
</body>

js操作邏輯

vm=avalon.define({
	$id:"test",
	object:{aaa:1111,bbb:2222,ccc:3333},
	array:["AA","BB","CC"],
	objectArray:[{aaa:1111,bbb:2222,ccc:3333},{aaa:4444,bbb:5555,ccc:6666},{aaa:7777,bbb:8888,ccc:9999}],
	changeObject:function(){
		//vm.object={aaa:444,bbb:555,ccc:666};
		vm.object.aaa=555;
	},
	//下標更改值
	changeArray:function(){
		vm.array.set(2,"DD");
	},
	changeObjectArray:function(){
		vm.objectArray[0].aaa=555;
	}
	
});

效果：

avalon 陣列升、降序

介面

<body ms-controller="vm">
<p>
<select ms-duplex="selected">
<option  ms-repeat="options">{{el}}</option>
</select>
<select ms-duplex="trend">
<option  value="1">up</option>
<option  value="-1">down</option>
</select>
</p>

<table border="1px">
<tr><td>name</td><td>size</td><td>date</td></tr>
<tr ms-repeat="data" ms-duplex="data"><td>{{el.name}}</td><td>{{el.size}}</td><td>{{el.date}}</td></tr>
</table>
</body>

js程式碼邏輯

avalon.ready(function(){
	vm=avalon.define({
		$id:"vm",
		options:["name","size","date"],
		data:[{name:"aaa",size:"1521",date:Date.now()+1},
		      {name:"bbb",size:"5252",date:Date.now()+10},
		      {name:"ccc",size:"1521",date:Date.now()-7},
		      {name:"ddd",size:"1251",date:Date.now()+15}],
		selected:"name",
		trend:1
	});
	
	//欄位排序(先欄位排序，然後在升降序排列):v表示當前元素的值
	vm.$watch("selected",function(v){
		var t=parseFloat(vm.trend);   //獲取升序降序的標誌
		vm.data.sort(function(a,b){  //對資料進行排序
			var ret=a[v]>b[v]?1:-1;  //預設升序排列
			return t*ret;   
		});
	});
	
	//按欄位升降排序：sort返回值為負數表明a<b,a放在b後面，否則放在前面：a,b是陣列中任意兩個比較元素
	vm.$watch("trend",function(t){
		var v=vm.selected;
		var t=parseFloat(t);
		vm.data.sort(function(a,b){
			var ret=a[v]>b[v]?1:-1;
			return t*ret  //當返回值為負數時，a排在b的後面，否則a排在b的前面。
		});
	});
	avalon.scan();
});

效果：

陣列成員元素動態建立

介面

<body ms-controller="vm">

<!-- 繫結form的submit事件 -->
<form ms-on-submit="add" >
<label>請在下列輸入框中輸入內容：</label><br>
<!-- 
ms-duplex:雙工繫結：avalon中的屬性值和dom物件的元素的值繫結
 -->
<input type="text" ms-duplex="text">
<input type="submit" value="提交">
</form><br>
<p ms-if="todoList.size()>0">現有<font color="red">{{todoList.size()}}</font>項todoList!</p>
<ol>
<li ms-repeat="todoList">
{{el}}<a href="#" ms-click="$remove" style="text-decoration:none;">&nbsp;&nbsp;x</a>
</li>
</ol>
</body>

js程式碼邏輯

var vm=avalon.define({
	$id:"vm",
	text:'',
	todoList:[],
	add:function(e){
		e.preventDefault();
		if(vm.text.length>0){
		vm.todoList.push(vm.text);
		vm.text='';
		}
	}
});

效果：

【MVVM】- Avalon 陣列操作

avalon 物件、物件陣列、陣列基本操作介面 <body ms-cont

【Linux】Shell - 陣列操作

Shell中資料型別不多，比如說字串，數字型別，陣列。陣列是其中比較重要的一種，其重要應用場景，可以求陣列長度，元素長度，遍歷其元素，元素切片，替換，刪除等操作，使用非常方便。 Shell中的陣列不像JAVA/C，只能是一維陣列，沒有二維陣列;陣列元素大小無約束，也無需先定義陣

【vuejs】vue陣列操作

vue中陣列的操作總結：一、根據索引設定元素： 1、呼叫$set方法： this.arr.$set(index, val); 2、呼叫splice方法： this.arr.splice(index, 1, val); 二、合併陣列： this.arr = this.ar

【MVVM】- Avalon 事件繫結

avalon事件繫結介面 <body ms-controller=&quo

【MVVM】- Avalon 過濾器

ms-controlle作用：當頁面事先載入而頁面並未完全渲染完成時自動隱藏目標顯

【MVVM】- Avalon 屬性監控、解除監控、子孫元素監控、統一屬性監控

Avalon 屬性監控 $watch:屬性值改變就會改變監聽當前的vm第1層

【MVVM】- Avalon驗證器duplexHooks

avalon驗證器: 主要用來限定某些元素的格式輸入介面 <!-- ms-

【c/c++陣列】複習陣列操作

一維陣列賦值( a[10]直接賦值：a[10]={1,2,3,...,9};不賦初值：隨機值或0全賦同一初值：a[10] = {0}; //或者更推薦用memset函式memset函式：memset(陣列名，值，sizeof(陣列名))；//如：memset(a , 0 ,

【MVVM】- AngularJS 下拉框操作

AngularJS 下拉框基礎應用外觀介面 <div ng-app=&qu

【轉】jquery cookie操作

訪問網站 blog cookie img jquer src dom 存儲購物 Cookie是網站設計者放置在客戶端的小文本文件。Cookie能為用戶提供很多的使得，例如購物網站存儲用戶曾經瀏覽過的產品列表，或者門戶網站記住用戶喜歡選擇瀏覽哪類新聞。在用戶允許的情況下，

【原】無腦操作：Windows 10 + MySQL 5.5 安裝使用及免安裝使用

界面圖標 ini文件字符集設置 exe 可能 mon rem 選擇本文介紹Windows 10環境下， MySQL 5.5的安裝使用及免安裝使用資源下載： MySQL安裝文件：http://download.csdn.net/detail/lf19820717/

dos下【mysql】的基礎操作

password 查看數據庫 ren class first 錯誤 rop log mysql 【基本操作】查看幫助（help ?）\h \? 退出（exit quit） \q 如果寫錯了命令，想要清除當前輸入命令的語句，在錯誤的命令之後加（clear）

【20171224】文件操作

lose 名稱 label print open 取數據 for test 模塊 1、讀寫txt #coding=utf-8 # 讀文件 def read_file(): # 讀取文件 read_txt = open(‘txt/read_txt‘,‘r

【BZOJ2333】棘手的操作（左偏樹，STL）

ise 最大 pre mat line online continue inline lld 【BZOJ2333】棘手的操作（左偏樹，STL）題面 BZOJ上看把。。。題解正如這題的題號我只能$2333$ 神TM棘手的題目。。。前面的單點/聯通塊操作很顯然是

【API】文件操作編程-CreateFile、WriteFile、SetFilePointer

移動 turn 操作 .cpp 名稱 create 輸出拷貝 null 1、說明　很多黑客工具的實現是通過對文件進行讀寫操作的，而文件讀寫操作實質也是對API函數的調用。 2、相關函數 CreateFile ：　創建或打開文件或I/O設備。最常用的I/O設備如下：文件

【轉】Python中操作mysql的pymysql模塊詳解

定義 padding 參數化查詢 finall 支持順序執行sql mysq syntax Python中操作mysql的pymysql模塊詳解前言 pymsql是Python中操作MySQL的模塊，其使用方法和MySQLdb幾乎相同。但目前pymysql支持p

【原】無腦操作：IDEA + maven + SpringBoot + JPA + Thymeleaf實現CRUD及分頁

xtend sla lns ase tid item pen element per 一、開發環境： 1、windows 7 企業版 2、IDEA 14 3、JDK 1.8 4、Maven 3.5.2 5、MariaDB 6、SQLYog 二、Maven設

【Flask】Flask Cookie操作

否則 timedelta 什麽 bsp gis time delet 主域名 res ### 什麽是cookie：在網站中，http請求是無狀態的。也就是說即使第一次和服務器連接後並且登錄成功後，第二次請求服務器依然不能知道當前請求是哪個用戶。cookie的出現就是為了解決

【MySQL】MySQL審計操作記錄

MySQLserver_audit是一款內嵌在mariadb的審計插件，在mysql中同樣適用，主要用於記錄用戶操作 1.安裝：通過show variables like ‘plugin_dir‘;查看你的插件目錄，我的是：/usr/lib64/mysql/plugin/???? 把下載好的插件serve

【轉】JavaScript 節點操作以及DOMDocument屬性和方法

表示位置 clas 句柄 doc elements nta XML sele 最近發現DOMDocument對象很重要,還有XMLHTTP也很重要註意大小寫一定不能弄錯. 屬性: 1Attributes 存儲節點的屬性列表(只讀) 2childNodes 存儲節點的子

【MVVM】- Avalon 陣列操作

avalon 物件、物件陣列、陣列基本操作

avalon 陣列升、降序

陣列成員元素動態建立

相關推薦