Vue官方文档(31):状态过渡示例

最新推荐文章于 2024-06-10 18:32:55 发布

amadeus_liu2

最新推荐文章于 2024-06-10 18:32:55 发布

阅读量185

点赞数

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

本文链接：https://blog.csdn.net/amadeus_liu2/article/details/127683693

版权

Vue 专栏收录该内容

70 篇文章 0 订阅

订阅专栏

一、安装gsap

npm install gsap@3.2.4

二、示例

<template>



  <div >

<div id="animated-number-demo">
  <input v-model.number="number" type="number" step="20">
  <p>{{ animatedNumber }}</p>
</div>


 </div>


</template>


 <script>
 
 //import Vue from 'vue'
 import gsap from 'gsap'
 
 



  export default{
  components: {

  },
    data() {
      return {
        show: true,
        number: 0,
    tweenedNumber: 0

              }
            },
    methods:{


      
    },
    computed: {
      animatedNumber: function(){
        return this.tweenedNumber.toFixed(0);
      }
    },
     watch: {
    number: function(newValue) {
      gsap.to(this.$data, { duration: 0.5, tweenedNumber: newValue });
    }
  }
  }
      
    </script>

<style >

  

</style>