vue 自己制作的刻度尺方便简洁好用

最新推荐文章于 2025-01-08 08:57:25 发布

前端技术栈

最新推荐文章于 2025-01-08 08:57:25 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue CSS js

本文链接：https://blog.csdn.net/weixin_42981560/article/details/116785077

js 同时被 3 个专栏收录

98 篇文章

订阅专栏

vue

52 篇文章

订阅专栏

CSS

12 篇文章

订阅专栏

此篇博客介绍了如何使用 Vue 和 JavaScript 实现一个动态的分块显示功能，每部分用 '-' 连接，从 0 到指定数量。适用于展示数据分段或进度条设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view class="scan">
		<block v-for="(item,index) in section" :key="index" class="">
			<text >{{(section-index)*(numbers/section)}}  —</text>
			<text v-for="(item,l) in 10" :key="l">-</text>
		</block>
		<text>0 —</text>
	</view>
</template>

<script>
	export default{
		data(){
			return{}
		},
		props:{
			numbers:{
				type: Number,
				default: 100
			},
			section:{
				type: Number,
				default: 2
			}
		
		}
		
	}
</script>

<style>
scan{
	display: flex;
    flex-direction: column;
    justify-content: space-between;
    height:400px
    width:100px
    color:#333,
    text-align:right
    line-height:0px
}

</style>