vuejs如何实现文字上下滚动效果

vuejs如何实现文字上下滚动效果，下面编程教程网小编给大家详细介绍一下实现代码！

实现代码如下：

<div class="scroll">
  <ul ref="rollul" :class="{anim:animate==true}">
    <li v-for="item in lists">
      <span>{{item.time}}</span>
      <span>{{randomPhoneNumber()}}</span>
      <span>{{item.company}}</span>
    </li>
  </ul>
</div>

<script>
new Vue({
  el:'#app',
  data(){
    return{
      animate:false,
  	  lists:[
  	    {time:'2秒钟前',company:'公司1'},  
  	    {time:'8秒钟前',company:'公司2'}, 
  	    {time:'3分钟前',company:'公司3'},  
  	    {time:'5分钟前',company:'公司4'}
  	  ],
  	};
  },
  
  created(){
      setInterval(this.scroll,2000)
  },
  
  methods:{
   // 根据字典生成随机序列
   randomCode:function (len,dict) {
     for (var i = 0,rs = ''; i < len; i++)
     rs += dict.charAt(Math.floor(Math.random() * 100000000) % dict.length);
     return rs;
   },
   // 生成随机手机号码
   randomPhoneNumber:function(){
     return [1,this.$options.methods.randomCode(2,'3458'),'****',this.$options.methods.randomCode(4,'0123456789')].join('');
   }, 
   scroll(){
     this.animate = true
     var that = this;
     setTimeout(function(){
       that.lists.push(that.lists[0]);
       that.lists.shift();
       that.animate=false;
     },1500)
   }
  }
})
</script>

以上是编程学习网小编为您介绍的“vuejs如何实现文字上下滚动效果”的全面内容，想了解更多关于 vuejs 内容，请继续关注编程基础学习网。