VUE 给循环遍历的数据加序号排列展示

最新推荐文章于 2023-10-23 16:48:14 发布

_SUNSHIN_

最新推荐文章于 2023-10-23 16:48:14 发布

阅读量1.9k

点赞数 1

文章标签： vue.js

原文链接：https://www.freesion.com/article/85231274794/

版权

效果：

代码：

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

vue 给循环遍历的数据加序号排列展示_小羽向前跑-CSDN博客_v-for 序号