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>