Vue 过滤器

允我心安 提交于 2020-04-01 09:36:08

 

内容中的{{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>

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!