<!DOCTYPE html>
<div id="app">
<input v-model.number="firstNumber" type="number" step="20" /> *
<input v-model.number="secondNumber" type="number" step="20" /> = {{ result }}
<p>
<animated-integer :value="firstNumber"></animated-integer> *
<animated-integer :value="secondNumber"></animated-integer> =
<animated-integer :value="result"></animated-integer>
</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
<script src="https://unpkg.com/vue@next"></script>
<script>
const app = Vue.createApp({
data() {
return {
firstNumber: 40,
secondNumber: 20
}
},
computed: {
result() {
return this.firstNumber * this.secondNumber
}
}
})
app.component('animated-integer', {
template: '<span>{{ fullValue }}</span>',
props: {
value: {
type: Number,
required: true
}
},
data() {
return {
tweeningValue: 0
}
},
computed: {
fullValue() {
return Math.floor(this.tweeningValue)
}
},
methods: {
tween(newValue, oldValue) {
gsap.to(this.$data, {
duration: 0.5,
tweeningValue: newValue,
ease: 'sine'
})
}
},
watch: {
value(newValue, oldValue) {
this.tween(newValue, oldValue)
}
},
mounted() {
this.tween(this.value, 0)
}
})
app.mount('#app')
</script>
几乘几等于几的表示方法。为什么没有setup,什么情况下需要有setup
最新推荐文章于 2024-09-30 16:19:08 发布