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>