Vue 2.0修仙之路 — 过滤器和使用javascript表达式

过滤器

filters ：{
capitalize:function(){}
}
一次处理 {{ message | capitalize }}
多次处理,可以串联 {{ message | capitalize | touppercase }}
过滤器可以接受参数

{{ msg | capitalize | touppercase2(1,2) }}

第一个参数默认是值
touppercase2:function(value,num1,num2){
return value.toUpperCase()+num1+num2;
}

HTML代码

    
    
    


    

        
{{msg}}
        
        
{{msg}}
        

        
鼠标放在我上面
        渲染纯字符串
        按钮
        
这是一个表达式{{1+3}}
        
        
这是一个显示的表达式
        禁止跳到百度
        
{{ msg | capitalize }}
        
{{ msg | capitalize | touppercase }}
        
{{ msg | capitalize | touppercase2(1,2) }}
        缩写方式,百度
        缩写方式的点击
    

JS代码

window.onload = function(){
    // 数据
    var data = {
        msg:'app',
        br_:'
你好！
',
        msg1:"你好！",
        isDisabled:false,
        num:1,
        url:'https://www.baidu.com'
    }
    // 方法
    var methods = {
        desLink:function(){
            console.log("禁止跳转")
        },
        click_:function(){
            alert("点击事件！")
        }
    }
    // 过滤器
    var filters = {
        capitalize:function(value){
            console.log(value);
            return value.split("").reverse().join("");
        },
        touppercase:function(value){
            return value.toUpperCase();
        },
        touppercase2:function(value,num1,num2){
            return value.toUpperCase()+num1+num2;
        }

    }
    // 实例
    var vm = new Vue({
        el:'#app',
        data:data,
        methods:methods,
        filters:filters
    })
    // 模板语法
    /*
    
      {{}}  插入  v-once  不能改变的值
        
      v-html  渲染html 
      
      特性：{{}} 语法不能用在属性上  v-bind:属性名字
       
        
  错误

          错误
        
        
鼠标放在我上面
  正确

     渲染纯字符串

        渲染纯字符串 错误

        渲染纯字符串 正确

     */
    /*
        使用javascript表达式
    
        
这是一个表达式{{1+3}}
  正确
        
这是一个显示的表达式
  正确
        
{{var a = 1}}
  错误
        
     */
    /*
        事件修饰符
            prevent  阻止默认行为

     */
    
}

原网址：Vue之过滤器：https://cn.vuejs.org/v2/guide/filters.html#ad