Vuejs中v-for获取的数据能够进行自定义的函数处理吗

Question

<ul>
    <li v-for="(item,index) in list">{{item}}</li>
    <li>{{index}}</li>
</ul>

var demo = new Vue({
    ...
    data:{
       list:[
           1233,
           2334,
           ...
       ]
    }
});

上面的渲染用的是list里面的原始数据，没有问题。但如果我想用自定义方法处理过的item和index来渲染视图，要怎么做？

//自定义函数处理item
   function fn(item){
        dosomething for item...
   }
   //渲染
   <li v-for="item in list"list>{{fn(item)}}</li>

当然上面这样是不行的，只是为了说明问题。

同样 index，直接渲染得到的是0，1，2..我想把它处理成01,02...

Answer 1

不知道是不是你要的功能

var vm = new Vue({
            el: '#app',
            data : {
                ...
                }
            },
            methods: {
                func: function (item) {
                    return (do something for item)
                }
            }
        })

<li v-for="item in list">
    {{ func(item) }}
</li>

是可以这样调用方程的
这里有介绍

Answer 2

    // 写一个filter解决
    Vue.filter('fn', function (value) {
        return value>10?value:'0'+value;
    })

    <ul>
        <li v-for="(item,index) in list">
           <span>{{index|fn}}:</span>
           {{item}}
        </li>
        
    </ul>

Answer 3

计算属性computed，官方文档说的很详细了

computed:
  listFormat () {
    return format(this.list)
}