Vue官方文檔(31):狀态過渡示例

npm install [email protected]      

<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>