Atitit 項目界面h5化靜態html化計划---vue.js 把ajax獲取到的數據 綁定到表格控件 v2 r33.docx
2.5. 時間日期等其他字段格式化 使用vue.js的 filter過濾器3
1. 場景：應用在項目列表查詢場景下
全面的的使用html h5界面分離前后端，使界面可以通用與pc端java php net 微信項目，以及 安卓 ios跨平台以及hybrid app。。
也方便前端人員隨時介入調整java項目的界面，加快進度
盡可能的不再使用服務端界面技術（jsp struts wpf el等），一方面沒有完整的分離前后端，混雜，一方面服務端界面技術復雜度較大，不利於前端人員介入調整java項目界面
畢竟目前項目界面幾乎就占據了50%的工作量，可以方便分散壓力
1.1. 預計初步掌握vue.js 幾小時即可
2. 綁定ajax列表數據到表格
2.1. List.html 使用v-for循環一下
<table width="100%" border="0" id="table1">
<tbody>
<tr>
<td>用戶id</td>
<td> </td>
<td>備注</td>
<td>操作</td>
</tr>
<tr v-for="dataItem in list_data1">
<td> </td>
<td><span class="hide">{{dataItem.用戶名}}</span></td>
<td><span class="hide">{{dataItem.備注}}</span></td>
<td> </td>
</tr>
2.2. 預覽
2.3. 使用vue.js綁定
<script>
//建立vue與表格的綁定關系，同時設置初始值為空[]
//el就是表格id
//list_data1是自定義的數據列表
var VueObj1 = new Vue({
el: '#table1',
data: {
list_data1: []
}
});
//獲取數據，一般是從ajax從后端獲取數據
var list_data2=[{用戶名:"王一",備注:"管理員"},{用戶名:"王二",備注:"普通用戶"}];
//將數據綁定到table控件
VueObj1.$data.list_data1=list_data2;
2.4. 效果
| 用戶id |
用戶名 |
備注 |
操作 |
|
|
王一 |
管理員 |
|
|
|
王二 |
普通用戶 |
|
2.5. 時間日期等其他字段格式化 使用vue.js的 filter過濾器
1. v-bind 綁定元素屬性方法
2. v-text 輸出文本方法
<td>{{itemdata.timex | timeFlt}}</td>
Vue.filter('timeFlt', function (value) {
return fmtDate_local(value);
})
3. 其他
3.1. 9.Vuejs在變化檢測問題
3.1.1.1. 1.檢測數組
由於JavaScript的限制，vuejs不能檢測到下面數組的變化：
1.
直接索引設置元素，如vm.item[0]={};
2.
3.
修改數據的長度，如vm.item.length。
4.
為了解決問題1，Vuejs擴展了觀察數組，為它添加一個$set()方法：
// 與 `example1.items[0] = ...` 相同，但是能觸發視圖更新
example1.items.$set(0, { childMsg: 'Changed!'})
問題2，需要一個空數組替換items。
除了$set()，vuejs也為觀察數組添加了$remove()方法，用於從目標數組中查找並刪除元素，在內部調用了splice()。因此，不必：
var index = this.items.indexOf(item)if (index !== -1) {
this.items.splice(index, 1)
}
只需：
this.items.$remove(item);
3.2. 參考資料
VUEJS 實戰教程第二章,修復錯誤並且美化時間 - FungLeo的博客 - 博客頻道 - CSDN.NET.html
vue.js - 為什么vue的data數據變了html中用{{}}綁定的數據不會變呢？ - SegmentFault.html
Vue 列表渲染 - jiangxiaobo - 博客園.html
Vue.js學習筆記：屬性綁定 v-bind.html
作者:: 綽號:老哇的爪子claw of Eagle 偶像破壞者Iconoclast image-smasher
捕鳥王"Bird Catcher kok 虔誠者Pious 宗教信仰捍衛者 Defender Of the Faith. 卡拉卡拉紅斗篷 Caracalla red cloak 萬獸之王
簡稱：： Emir Attilax Akbar 埃米爾 阿提拉克斯 阿克巴
全名：：Emir Attilax Akbar bin Mahmud bin attila bin Solomon bin adam Al Rapanui 埃米爾 阿提拉克斯 阿克巴 本 馬哈茂德 本 阿提拉 本 所羅門 本亞當 阿爾 拉帕努伊
常用名：艾提拉（艾龍）， EMAIL:1466519819@qq.com
頭銜：uke總部o2o負責人，全球網格化項目創始人，
uke交友協會會長 uke捕獵協會會長 Emir Uke部落首席大酋長，
uke宗教與文化融合事務部部長， uke宗教改革委員會副主席
uke制度與重大會議委員會委員長，uke保安部首席大隊長,uke制度檢查委員會副會長，
uke 首席cto 軟件部門總監 技術部副總監 研發部門總監主管 產品部副經理 項目部副經理 uke科技研究院院長 uke軟件培訓大師
uke波利尼西亞區大區連鎖負責人 湯加王國區域負責人 uke克爾格倫群島區連鎖負責人，萊恩群島區連鎖負責人，uke布維島和南喬治亞和南桑威奇群島大區連鎖負責人
Uke軟件標准化協會理事長理事長 Uke 數據庫與存儲標准化協會副會長
uke終身教育學校副校長 Uke醫院 與醫學院方面的創始人
uec學院校長， uecip圖像處理機器視覺專業系主任 uke文檔檢索專業系主任
Uke圖像處理與機器視覺學院首席院長
Uke 戶外運動協會理事長 度假村首席大村長 uke出版社編輯總編
轉載請注明來源：attilax的專欄 ?http://www.cnblogs.com/attilax/
--Atiend v8