vue.js基礎知識篇(4):過濾器、class與style的綁定2
阿新 • • 發佈：2017-06-22
input事件 自定義 size reverse 註意點 參數 in use num -h 
代碼下載:網盤
歡迎私信
第一章:過濾器
過濾器是對數據進行處理並返回結果的函數。
1.語法
語法是使用管道符“|”進行連接。過濾器可以接收參數，跟在過濾器後面，帶引號的參數被當做字符串處理，不帶引號的參數被當做數據屬性名處理。
{{message | filterFunction "arg1" arg2 }}
vue.js支持在任何出現表達式的地方添加過濾器。
vue.js支持鏈式調用，上一個過濾器的輸出結果作為下一個過濾器的輸入。類似於Linux shell的管道符(|)使用。
<span>{{"ddfe"|capitalize|reverse}}</span><!--ddfe->Ddfe->efdD-->
2.內置過濾器
(1)字母操作capitalize、uppercase、lowercase
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字母操作過濾器</title> </head> <body> <div id="app"> <div>{{"ddfe"|capitalize}}</div> <div>{{"ddfe"|uppercase}}</div> <div>{{"DDFE"|lowercase}}</div> </div> <!--"ddfe"=>capitalize--> <script src="js/vue.js"></script> <!--它以vue對象的形式掛載到window對象上--> <script> new Vue({ el:"#app" }) </script> </body> </html>
(2)json過濾器
先看它如何使用的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div >{{didiFamily|json}}</div> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ didiFamily:{ "name":"ddfe", "age":3 } } }) </script> </body> </html>
瀏覽器的顯示結果:
再來看一下源碼。
json: { read: function read(value, indent) { return typeof value === ‘string‘ ? value : JSON.stringify(value, null, Number(indent) || 2); }, write: function write(value) { try { return JSON.parse(value); } catch (e) { return value; } } }
主要說一說，JSON的stringify函數和JSON的parse函數。
stringify函數的功能是把對象或者數組轉換為JSON字符串。parse函數的功能是把有效的json字符串解析為對象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>json過濾器</title> </head> <body> </body> <script> var a = {a:1,b:2}; var str=JSON.stringify(a);//"{"a":1,"b":2}" var ps=JSON.parse(str);//{a:1,b:2} </script> </body> </html>
(3)限制過濾器limitBy、filterBy、orderBy
這3個過濾器處理的數據必須是數組，否則程序會報錯。
limitBy顯示以偏移量(默認為0)開始的N個數組。
filterBy要麽處理數組搜索字符串(參數提供)，要麽處理對象對所有屬性搜索字符串，如果提供特定屬性，使用"in"語法。
orderBy如果參數小於0，那麽是降序排列，如果參數大於0，那麽是升序排列。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div v-for="num in nums| limitBy 10"> <div>{{num}}</div> <!--顯示從默認的0開始的10個元素--> </div> <div v-for="num in nums| limitBy 10 2"> <div>{{num}}</div> <!--顯示從索引為2開始的10個元素--> </div> <div>{{arr|filterBy "hello"}}</div> <input v-model="name"/> <ul> <li v-for="user in users|filterBy name in ‘name‘"> {{user.name}} </li> <!--動態參數作為搜索字段--> </ul> <div>{{nums|orderBy -1}}</div> <!--參數小於,0，那麽是降序排列，參數大於0，那麽是升序排列--> <div>{{nums|orderBy 1}}</div> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ nums:[1,2,3,4,5,6,7,18,9,10,11,12,13], arr:["hello1","hello2","hello3","welcome"], users:[ {name:"Bruce"}, {name:"Chuck"}, {name:"Jackie"} ], name:"" } }) </script> </body> </html>
(4)currency過濾器
作用是給數字添上貨幣符號，默認的為$美元。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div>{{"122334"|currency "￡"}}</div> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app" }) </script> </body> </html>
(5)debounce過濾器
作用是延遲一段時間處理。一般與v-on指令結合使用。默認延遲時間300毫秒。如果監聽用戶的input事件，有時可用來防止頻繁調用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input @keyup="onkeyup|debounce 3500"/> </div> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", methods:{ onkeyup:function(){ alert("3500毫秒後執行onkeyup方法"); } } }) </script> </body> </html>
3.自定義過濾器
首先，filter函數是一個掛載到Vue上的全局函數(打印window可觀察到)，然後要說明的是它接收的參數，第一個過濾器的id名字，第二個是一個定義過濾器的function。下面從參數類型分別來討論function。
(1)單個參數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>單個參數的自定義過濾器</title> </head> <body> <div id="demo"> <span v-text="message|reverse"></span> </div> <script src="js/vue.js"></script> <script> console.log(window); </script> <script> Vue.filter("reverse",function(value){ return value.split("").reverse().join(""); }) var vm=new Vue({ el:"#demo", data:{ message:"hello world!" } }) </script> </body> </html>
(2)多參數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多參數的自定義過濾器</title> </head> <body> <div id="demo"> <span v-text="message |wrap ‘before‘ ‘end‘ "></span> </div> <script src="js/vue.js"></script> <script> console.log(window); </script> <script> Vue.filter("wrap",function(value,begin,end){ return begin+""+value+""+end; }) var vm=new Vue({ el:"#demo", data:{ message:"hello" } }); </script> </body> </html>
(3)雙向過濾器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{message}}</p> <input type="text" v-model="message|filterExample"/> </div> <script src="js/vue.js"></script> <script> Vue.filter("filterExample",{ read:function(val){ return "read "+val; }, write:function(newVal,oldVal){ return oldVal+" write"; } }) new Vue({ el:"#app", data:{ message:"hello world" } }) </script> </body> </html>雙向過濾器的DEMO
(4)動態參數
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input v-model="userInput"/> <span>{{msg | concat userInput}}</span> <script src="js/vue.js"></script> <script> Vue.filter("concat",function(value,input){ return value+input; }); new Vue({ el:"#app", data:{ msg:"hello", userInput:"" } }) </script> </div> </body> </html>
4.自己寫一個filter
註意點，過濾器的名字如果與內置過濾器沖突，內置過濾器會被覆蓋。
雙向過濾器的DEMO:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <p>{{message}}</p> <input type="text" v-model="message|filterExample"/> </div> <script src="js/vue.js"></script> <script> Vue.filter("filterExample",{ read:function(val){ return "read "+val; },
//第一次進入的時候執行read函數 write:function(newVal,oldVal){ return oldVal+" write"; }
//當value值發生改變時，執行write函數。 }) new Vue({ el:"#app", data:{ message:"hello world" } }) </script> </body> </html>
5.源碼解析
(1)capitalize過濾器
capitalize: function capitalize(value) { if (!value && value !== 0) return ‘‘; value = value.toString(); return value.charAt(0).toUpperCase() + value.slice(1); //charAt通過索引0取得首字母，然後通過toUpperCase()轉化為大寫，然後通過slice截取的從索引1開始的字符串，做加法。 },
(2)uppercase過濾器
uppercase: function uppercase(value) { return value || value === 0 ? value.toString().toUpperCase() : ‘‘; //先轉為字符串，然後進行大寫 },
(3)lowercase過濾器
lowercase: function lowercase(value) { return value || value === 0 ? value.toString().toLowerCase() : ‘‘; //先轉字符串兒，然後小寫 },
第2章:Class與Style綁定
關於樣式常常會操作元素的class列表和它的內聯樣式。
1.綁定HTML Class
(1)對象語法
傳給v-bind:class一個對象，通過變量來動態切換class,該對象要麽是對象字面量，要麽是數據中直接的一個對象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>單個參數的自定義過濾器</title> </head> <body> <div id="demo"> <div class="static" v-bind:class="{‘didi-orange‘:isRipe,‘didi-green‘:isNotRipe}"></div> <div class="static" v-bind:class="ddfe"></div> </div> <script src="js/vue.js"></script> <script> var vm=new Vue({ el:"#demo", data:{ isRipe:true, isNotRipe:false, ddfe:{ didiAge:4, didiMember:6000 } } }) </script> </body> </html>
渲染的效果為
另外，還可以綁定一個返回對象的計算屬性。略。
(2)數組語法
2.綁定內聯樣式
vue.js基礎知識篇(4):過濾器、class與style的綁定2