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>