效果：

代码： 

<template>
    <div>
        <!-- 给for循环数据 逐一加序号 -->
     <ul>
     <li  v-for="(item,index) in list" :key="item.id" >
          <p class="p1">{{ index+1>9?index+1:"0"+(index+1) }}</p>
          <p class="p2">{{ item.name }}&nbsp;&nbsp;{{ item.id }}&nbsp;&nbsp;{{ item.source }}</p>
     </li>
    </ul>
    </div>
</template>

 <script>
export default {

        data() {
            return {
               list: [{
               name: '张一',
               id: '1241',
               source: '经销商',
               },{
               name: '张二',
               id: '1242',
               source: '业务员',
               },{
               name: '张三',
               id: '1243',
               source: '普通用户',
               },{
               name: '张四',
               id: '1244',
               source: '商城',
               }],
               };
               },

        methods: {
       
        }

    }
</script>

<style scoped>
p{
    width: 300px;
    height: 30px;
    line-height: 30px;
    border:1px solid black;
    text-align: center;
}
.p1{
    color: red;
}
</style>