艾伦沃克哲 2021-04-13 22:39 采纳率: 33.3%
浏览 269
已结题

vue怎么实现渲染数组，指定显示数量不够自动补充占位内容

比如要实现，数组显示10条，例如当前数据只有7条，那另外3条不存在，需要自动补充占位，假如占位内容是 00，需要怎么实现这样效果；

21，32，43，54，65，76，87，00，00，00

 

 

 

  • 写回答

6条回答 默认 最新

  • CSDN专家-天际的海浪 2021-04-13 23:22
    关注
    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<style type="text/css">
</style>
</head>
<body>
    <div id="app">
   		<p v-for="val in flist(list,10,'00')">{{val}}</p>
    </div>
<script>
    var app = new Vue({
        el:"#app",
        data: {
	        list:[21,32,43,54,65,76,87]
		},
		methods: {
			flist: function (arr,n,str) {
				for (var i = arr.length; i < n; i++) {
					arr.push(str)
				}
				return arr;
			}
		}
    });
</script>

</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(5条)

报告相同问题？