vue 实现 换一换 功能

Posted 静静的fire

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 实现 换一换 功能相关的知识,希望对你有一定的参考价值。

点击按钮列表页随机获取三个商品并渲染

后台返回的数据为 d为一个数组

数组 arr=[0,1,2]初始值

data:{

   list:d,

  arr:[0,1,2]

}

生产随机数

 1 replace:function () {
 2             var a = [];
 3             var j= 0;
 4             while(j<3){
 5                 var b = Math.floor((Math.random()*this.list.length));
 6                 if(a.indexOf(b)==-1){
 7                   a.push(b);
 8                   j++;
 9                 }
10             };
11             this.arr = a;
12         }
13        }

 渲染

1 <li v-for="index in arr" > 2 {{list[index].title}} 3 </li> 

点击按钮触发repace随机生成列表

以上是关于vue 实现 换一换 功能的主要内容,如果未能解决你的问题,请参考以下文章

实现百度的换一换

vue.js怎么实现图片轮播?就是一个图片隔一秒换一张,不用别的功能

java文本区如何设置十个数字一换行

vue 和 jquery 加载顺序导致的问题

vue2.0 代码功能片段

react项目jianshu介绍