vue gsap 动态数字效果2

最新推荐文章于 2024-08-27 19:24:41 发布

随便叫个啥呢

最新推荐文章于 2024-08-27 19:24:41 发布

阅读量545

点赞数

分类专栏： vue 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/wanglj7525/article/details/120862353

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前一篇中用到了this 在vue3中不行
改了一种方法

<template>
    <div style="display: flex;justify-content: space-between;">
        <div class="ball" v-for="(item,index) in show.list" :key="index">
            <span style="font-size: 5vh;line-height: 5.5vh;font-weight: bold;" :key="index">{{ item }}</span>
        </div>
    </div>
</template>
<script lang="ts" setup>
import gsap from "gsap";
import { watch ,reactive} from "vue";

const props = defineProps({
    totalHj: { required: true, default: 0 },
})
const obj = reactive({
    tweenedNumber:0
})
const show = reactive({
    list:["0"]
})

function changeNumber() {
    gsap.to(obj, {
        duration: 0.5, tweenedNumber:props.totalHj, onUpdate: () => {
            show.list =  obj.tweenedNumber.toFixed(0).toString().split('');
        }
    });

}
changeNumber()
watch(props, (newData, oldData) => {
    console.log(newData,oldData)
    changeNumber();
})
</script>
<style lang="scss" scoped>
.ball {
    height: 5.5vh;
    width: 4vh;
    border-radius: 1vh;
    background-color: #1d48c1;
    border: 1px solid;
    margin-right: 2vh;
}
</style>

遇到的问题记录
开始把list定义为let类型导致页面一直不更新
从https://segmentfault.com/q/1010000038485031这个回答里找到解决方法

1、页面监听不到是因为你改的是变量，而不是return出去的对象数据。
vue监听的是return出去的对象。你改变量是没用的，变量不过是一个指针，你把指针重新指向一堆新数据并不会使得对象上的属性指向也改变。你可以先定义一个return的变量为result = {menuList};通过更改result.menuList来更改。
2、ref可以使用数组的方法，ref包装了一层，实际需要用.value形式访问数据。即menuList.value，value才是指向真实的数据