vue2前端中vant2中的唤醒组件van-circle掉坑

关注

原创最新推荐文章于 2026-03-04 11:03:09 发布 2.3k 阅读 AI 写同款· GEO 优化 ›

Vant 2 - 移动端 Vue 组件库 _ 问题记录 Vant 2 - 移动端 Vue 组件库 _ 问题记录发布初衷：记录在移动端项目中使用 Vant 2 组件库时遇到的各种问题，方便以后再次遇到类似问题，能够快时查阅解决，大家要是觉得有帮助的话，可以收藏一下，博主会不定时更新文章的目录基础组件 Popup 弹出层表单组件 DatetimePicker 时间选择 Field 输入框 Form 表单 Picker 选择器 Radio 单选框 Uploader 文件上传展示组件 List 列表导航组件 Tab 标签页阅读详情

1、官网上的原话：

rate 属性表示进度条的目标进度，v-model 表示动画过程中的实时进度。当 rate 发生变化时，v-model 会以 speed 的速度变化，直至达到 rate 设定的值。

此时我要做五个环形，无论怎么改变这个rate的数值都会影响前面的第一个环形，

原来的错误写法：

<div class="circle">
                            <div class="circle1">
                                <van-circle v-model="currentRate" :rate="80" :speed="100" text="0个" :stroke-width="40"
                                    layer-color="#cbcbcb" size="65px" />
                            </div>
                            <div class="circle2">
                                <van-circle v-model="currentRate" :rate="30" :speed="100" text="0个" color="#78c2e7"
                                    :stroke-width="40" layer-color="#cbcbcb" size="65px" />
                            </div>
                            <div class="circle3">
                                <van-circle v-model="currentRate" :rate="50" :speed="100" text="0个" color="#83b68c"
                                    :stroke-width="40" layer-color="#cbcbcb" size="65px" />
                            </div>
                            <div class="circle4">
                                <van-circle v-model="currentRate" :rate="60" :speed="100" text="0个" color="#da7858"
                                    :stroke-width="40" layer-color="#cbcbcb" size="65px" />
                            </div>
                            <div class="circle5">
                                <van-circle v-model="currentRate" :rate="70" :speed="100" text="0个" color="#d0a074"
                                    :stroke-width="40" layer-color="#cbcbcb" size="65px" />
                            </div>
                        </div>

然后就会一直影响前面的，一直高不懂，然后反复看上面的属性，关键是v-model实时监测数值的变化，所以就会有影响，

那么正确的写法是什么呢？

以下是正确的写法：

<div class="circle">
                            <div class="circle1">
                                <van-circle v-model="currentRate" :rate="80" :speed="100" text="0个" :stroke-width="40"
                                    layer-color="#cbcbcb" size="65px" />
                            </div>
                            <div class="circle2">
                                <van-circle v-model="currentRate1" :rate="30" :speed="100" text="0个" color="#78c2e7"
                                    :stroke-width="40" layer-color="#cbcbcb" size="65px" />
                            </div>
                            <div class="circle3">
                                <van-circle v-model="currentRate2" :rate="50" :speed="100" text="0个" color="#83b68c"
                                    :stroke-width="40" layer-color="#cbcbcb" size="65px" />
                            </div>
                            <div class="circle4">
                                <van-circle v-model="currentRate3" :rate="60" :speed="100" text="0个" color="#da7858"
                                    :stroke-width="40" layer-color="#cbcbcb" size="65px" />
                            </div>
                            <div class="circle5">
                                <van-circle v-model="currentRate4" :rate="70" :speed="100" text="0个" color="#d0a074"
                                    :stroke-width="40" layer-color="#cbcbcb" size="65px" />
                            </div>
                        </div>

就是绑定的v-model ,每个都是要不一样的 currentRate

就是这样入坑的。

收录于