博客

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

就是这样入坑的。