Vue 過濾器

 

內容中的{{var}}會直接顯示，使用過濾器：{{var | 過濾器名}}，會先用過濾器處理var，再顯示。

按做用域劃分，有2種過濾器：全局過濾器、組件內過濾器。

 

 

demo  組件內過濾器

　　 <div id="app">
        <input v-model="content" /><br />  綁定input的value到變量content-->
        <p>原來的字符串：{{content}}p>  不使用過濾器-->
        <p>字符串反轉：{{content | reversal}}p>   使用過濾器reversal，先反序、再顯示-->
    div>
    
    
    <script>
        
        new Vue({
            el:'#app',
            data:function(){                return {
                    content:''  //最初變量沒有值，split()會報錯，給它賦一個初始值                }
                
            },
            filters:{                // 定義一個組件內過濾器                reversal(val){  //過濾器名(參數表)，會自動把|前面的變量做爲實參傳入
                    return val.split('').reverse().join('');  //先切分爲字符數組、數組反序、數組鏈接爲一個字符串                }                //可定義多個過濾器，逗號分隔便可            }
        });        
    script>

 

 

 

demo  全局過濾器

　　 <div id="app">
        <input v-model="content" /><br />  
        <p>原來的字符串：{{content}}p>
        <p>字符串反轉：{{content | reversal}}p> 
    div>
    
    <script>
        //定義一個全局過濾器，全部組件都可使用此過濾器。
        //過濾器名、指向的函數，全局過濾器的過濾器名要引發來做爲字符串，否則會被認爲是變量，會報錯過濾器未定義        Vue.filter('reversal',function(val){            return val.split('').reverse().join('');  //內容反序        });        
        new Vue({
            el:'#app',
            data:function(){                return {
                    content:''  //最初變量沒有值，split()會報錯，給它賦一個初始值                }
                
            },
        });        
    script>

 

 

 

Vue中的this

　　 <div id="app">
        <input v-model="content" /><br />  
    div>
    
    <script>
        
        new Vue({
            el:'#app',
            data:function(){ 
                return {
                    content:'ok'  //最初變量沒有值，split()會報錯，給它賦一個初始值                }
                
            },
            created:function(){
                console.log(this);  //this表示當前Vue對象，包含了當前Vue對象的各類信息            },
        });        
    script>

 

 

 

函數能夠寫成   標識符:function(參數表){   }，標識符指向匿名函數，也能夠直接寫成  標識符(參數表){   }

好比上面的代碼能夠寫爲：

　　 <div id="app">
        <input v-model="content" /><br />  
    div>
    
    
    <script>
        
        new Vue({
            el:'#app',
            data(){  //另外一種寫法
                return {
                    content:'ok' 
                }
                
            },
            created(){  //                console.log(this);  
            },
        });        
    script>