vue 里filter的基本用法

Posted dangdanghepingping

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 里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}}

 1     <div id="app">
 2         <div> {{val | upcaseVal(true)}}</div>
 3         <div v-bind:title="val | upcaseVal">{{val}}</div>
 4         <div>{{val | removeSpace}}</div>
 5     </div>
 6 
 7 
 8     <script>
 9         var vm = new Vue({
10             el: ‘#app‘,
11             data: {
12                 val: ‘hello world‘
13             },
14             filters: {
15                 upcaseVal: function (val, firstUpper) {//filter里函数的参数需要特别注意 第一个是指|前的值,第二个是true
16                     if (firstUpper) {
17                         return val.split(‘ ‘).map(function (e) {
18                             return e[0].toUpperCase() + e.slice(1)
19                         }).join(‘ ‘)
20                     }
21                     return val.toUpperCase();
22                 },
23                 removeSpace:function(val){
24                     return val.toUpperCase()
25                 }
26             }
27         })

 

以上是关于vue 里filter的基本用法的主要内容,如果未能解决你的问题,请参考以下文章

vue中filter用法

vue 中timestamp的用法

vue中Promise的用法

24-Vue之过滤器基本用法

vue 过滤器 基本用法

VUE2.x之过滤器的基本用法