vue filter的四种用法小结

filter的用法小结

使用计算属性app.js

var app5 = new Vue({
    el: '#app5',
    data: {
        shoppingList: [
            "Milk", "Donuts", "Cookies", "Chocolate", "Peanut Butter", "Pepto Bismol", "Pepto Bismol (Chocolate flavor)", "Pepto Bismol (Cookie flavor)"
        ],
        key: ""
    },
    computed: {
        filterShoppingList: function () {
            // `this` points to the vm instance
            var key = this.key;
            var shoppingList = this.shoppingList;
            return shoppingList.filter(function (item) {
                return item.toLowerCase().indexOf(key.toLowerCase()) != -1
            });;
        }
    }
})

app.html

       

Vue-for

       
               
  •                 {{ item }}            
  •        
       

Vue-for filter实现

       
                Filter Key               
  •                 {{ item }}            
  •        
           
   

最终效果实现了根据关键字来过滤列表的功能。 

filter的基本用法

filter是和data  computed   methods watch一样,都是new Vue()的参数。

用于对简单数据的处理,和computed有冲突,所以从vue2.0后就对filter做了删减,我觉得没有filter完全能够用其他方法比如computed来实现

用在{{ 变量1 | 变量2 }} 或者 v-bind:xx=“  变量1 | 变量2([参数) ”  两种;其中变量1是data的k,变量2是filter的k,

filter:{ 变量2:function(变量1,参数){xxxx}}

       
{{val | upcaseVal(true)}}
       
{{val}}
       
{{val | removeSpace}}
   
    
                    
                    

你可能感兴趣的:(vue filter的四种用法小结)