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

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

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

data:{

list:d,

arr:[0,1,2]

}

生产随机数

 replace:function () {
var a = [];
var j= 0;
while(j<3){
var b = Math.floor((Math.random()*this.list.length));
if(a.indexOf(b)==-1){
a.push(b);
j++;
}
};
this.arr = a;
}
}

渲染

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

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

vue 实现 换一换 功能的更多相关文章

  1. vue换一换功能原型

    <html> <meta charset="utf-8"> <head> <script src="https://cdn.bo ...

  2. Unity里的人物驱动/换装备/换武器/换衣服/卡通重定位(转)

    Unity里的人物驱动/换装备/换武器/换衣服/动画重定位 刚学的过程被这个问题困扰最多. 首先,基本的,大家都知道驱动人物需要骨架.绑骨的Mesh和动画(这三个要是不知道的话就得考虑看看计算机图形学 ...

  3. 今天抠图,Python实现一键换底片!想换什么换什么(附源码)

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 生活中我们会拍很多的证件照,有的要求红底,有的是白底,有的是蓝底,今天不通 ...

  4. [转]搬瓦工换机房换ip之后不能连外网

    搬瓦工换机房换ip之后不能连外网 时间 2015-07-21 15:17:16  Wendal随笔 原文  http://wendal.net/2015/07/21.html 主题 iptables ...

  5. jq验证码换一换

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...

  6. Vue (二) --- Vue对象提供的属性功能

    --------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...

  7. vue 对象提供的属性功能、通过axio请求数据(2)

    1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...

  8. vue教程2-07 微博评论功能

    vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...

  9. [转]***换机房换ip之后不能连外网

    ***换机房换ip之后不能连外网 时间 2015-07-21 15:17:16  Wendal随笔 原文  http://wendal.net/2015/07/21.html 主题 iptables ...

  10. Vue+Vuex 实现自动登录功能

    刚刚实现了Vue+Vuex的自动登录功能,在实现的时候遇到了一些问题,这里记录一下: 因为这个还不够完善,在写完下列代码后,又进行了补充,可以从https://www.cnblogs.com/xiao ...

随机推荐

  1. 大道至简第一章观后感——java伪代码

    一节: public class Yugongyishan_ { //定义一个名为Yugongyishan_的类 Public static void main(string args[])   // ...

  2. fetch的使用说明

    1.RN官方文档中,可使用XMLHttpRequest var request = new XMLHttpRequest(); request.onreadystatechange = (e) =&g ...

  3. 探索JSP中的 "9大内置对象!"

    1.什么是JSP内置对象? jsp内置对象就是Web容器创建的一组对象,我们都知道Tomcat可以看成是一种Web容器,所以我们可以知道所谓的内置对象Tomcat创建的,使用内置对象时可以不适用new ...

  4. 文件系统的几种类型:ext3, s…

    分类: 架构设计与优化 1.  ext3 在异常断电或系统崩溃(不洁关机, unclean system shutdown  ).每个已挂载ext2文件系统计算机必须使用e2fsck程序来检查其一致性 ...

  5. 【★】微信之于QQ的市场哲学

    2016年的移动app下载排行榜出炉后,我们惊奇发现,前十名中有6个应用软件来自腾讯公司.而前两名毋庸置疑是远远碾压第三名的微信与qq.这让我们看到社交app的重要性的同时也回到了那个原始的问题:腾讯 ...

  6. java201521123118《java程序设计》第5周总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1. 代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过 ...

  7. 201521123088《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  8. 201521123026《JAVA程序设计》第11周学习总结

    1. 本章学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 1.多线程同步:限制某个资源在同一时刻只能被一个线程访问.. 2.同步代码块:`synchronized(lock ...

  9. video标签

    Video标签的使用 Video标签含有src.poster.preload.autoplay.loop.controls.width.height等几个属性, 以及一个内部使用的标签<sour ...

  10. java.sql.Exception:setString 只能处理少于 32766 个字符的字符串

    java.sql.Exception:setString 只能处理少于 32766 个字符的字符串 解决方式是 : 升级ojdbc的版本,   将原来的 ojdbc14_10.2.0.2.0.jar ...