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

问题描述

问 题

<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...

解决方案

不知道是不是你要的功能

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>

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

这篇关于javascript - Vuejs中v-for获取的数据能够进行自定义的函数处理吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！