過濾器是顯示在頁面上的數(shù)據(jù)進行處理篩選操作
過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式?
過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示?
分為：全局過濾和局部過濾
全局過濾：
vue.filter('過濾器的名字'，function( ){ ? ? ?})
Vue指令：
v-else： ?不需要表達式 ? ?前一兄弟前必須有v-if或者v-else-if ?
v-html：單項數(shù)據(jù)綁定 ?可識別標簽
v-text：單項數(shù)據(jù)綁定 不可識別標簽
v-once: 只綁定一次 不需要表達式
v-pre：原樣輸出
v-cloak：保持在元素上直到關聯(lián)實例結(jié)束翻
v-if v-else-if v-else 都是判斷語句
案例：如果生成的隨機數(shù)是0輸出我是0，如果生成的隨機數(shù)是1輸出我是1，如果生成的隨機數(shù)是2輸出我是2，如果生成的隨機數(shù)是3輸出我是3，如果生成的隨機數(shù)是4輸出我是4，如果生成的隨機數(shù)是5輸出我是5
v-else元素必須緊跟在?v-if?或者?v-else-if?元素的后面——否則它將不會被識別。
類似于 v-else，v-else-if 必須緊跟在 v-if 或者 v-else-if 元素之后
全局過濾器：vue.filter("guolvqi
保留兩位數(shù)字的過濾器
<!DOCTYPE html>
<html lang="en">
<head>
? ?? ??<meta charset="UTF-8">
? ? <title>Document</title>
</head>
<body>
? ? <div id="lgy">
? ? ? ? <p>{{123.456|number}}</p>
? ? </div>
? ? <script src="js/vue.js"></script>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el:'#lgy',
? ? ? ? ? ? filters:{
? ? ? ? ? ? ? ? number:function(data){
? ? ? ? ? ? ? ? return:data.toFixed(2)
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
局部過濾
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>Document</title>
</head>
<body>
? ? <div id="lbx">
? ? ? ? <p>{{8|addZero}}</p>
? ? </div>
? ? <script src="js/vue.js"></script>
? ? <script>
? ? ? ? new Vue({
? ? ? ? ? ? el:'#itany',
? ? ? ? ? ? data:{},
? ? ? ? ? ? methods:{},
? ? ? ? ? ? //局部過濾器
? ? ? ? ? ? filters:{
? ? ? ? ? ? ? ? addZero:function(data){
? ? ? ? ? ? ? ? ? ? if(data<10){
? ? ? ? ? ? ? ? ? ? ? return '0'+data;
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? return data;
? ? ? ? ? ? ? ? ? ? }? ? ?
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? })
? ? </script>
</body>
</html>
