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的基本用法的主要内容,如果未能解决你的问题,请参考以下文章