本文介绍了vue实现手机号码抽奖上下滚动动画示例，分享给大家。具体如下：
@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ <div class="num mui-text-center"> <div class="span"> <div>1@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ <div class="span"> <transition name="down-up-translate-fade"> <div :key="i">{{i}}@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ </transition> @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ <div class="span"> <transition name="down-up-translate-fade"> <div :key="j">{{j}}@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ </transition> @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ <div class="span"> <div>*@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ <div class="span"> <div>*@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ <div class="span"> <div>*@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ <div class="span"> <div>*@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ <div class="span"> <transition name="down-up-translate-fade"> <div :key="k">{{k}}@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ </transition> @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ <div class="span"> <transition name="down-up-translate-fade"> <div :key="l">{{l}}@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ </transition> @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ <div class="span"> <transition name="down-up-translate-fade"> <div :key="i">{{i}}@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ </transition> @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ <div class="span"> <transition name="down-up-translate-fade"> <div :key="j">{{j}}@H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ </transition> @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@ @H_<a href="/tag/404/" target="_blank" class="keywords">404</a>_16@
@H_404_16@
<script src="js/vue.js" type="text/javascript" charset="utf-8"> <script type="text/javascript">
new Vue({ el: '#demo',data: { show: true,i: 0,j:0,k: 0,l: 0,interval: null },methods: { start: function() { this.show = !this.show var _this = this; if(!this.interval) { this.interval = setInterval(function() { _this.i = Math.floor(Math.random() * 10); _this.j = Math.floor(Math.random() * 10); _this.k = Math.floor(Math.random() * 10); _this.l = Math.floor(Math.random() * 10); },10) } },end: function() { this.show = !this.show clearInterval(this.interval) this.interval = null } } })
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
