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

后台返回的数据为 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. 在STEP7 TIA PORTAL中,设置模块的地址和设备名(Device name)

    assign device name, ip address for PROFINET componet in TIA Portal 方法1: PLC --> online & diag ...

  2. 结对作业-基于GUI的四则运算

    一.需求分析 1.题目要求: 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI(可以是Windows PC 上的,也可以是Mac.Linux,web ...

  3. Java中的基本数据类型和基本数据类型之间的转换

    在Java中有8中基本数据类型,分别为: 整型: byte.short.int.long 浮点型:float.double 布尔型:boolean 字符型:char. byte:    8位,  封装 ...

  4. 201521123119《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 本次PTA作业题集异常 Q1.常用异常 题目5-1 Q1.1 截图你的提交结果(出现学号) Q1.2 ...

  5. java课程设计-算术运算测试

    1. 团队名称.团队成员介绍 团队名称:cococo 团队成员 组长:网络1514叶城龙 201521123109 组员:网络1514余腾鑫 201521123108 2. 项目git地址 http: ...

  6. foreach_and_函数

    foreach(对集合每个元素的引用 in 集合){}例: int[] a = new int[5]{1,2,3,4,5,}; foreach(int b in a) { //b就是a中的每个元素 } ...

  7. Caused by: java.sql.BatchUpdateException: You have an error in your SQL syntax; check the manual tha

    使用了数据库的关键字index,如果有类似的错误,看看自己有没有使用关键字!

  8. Struts2第十一篇【简单UI标签、数据回显】

    Struts2UI标签 Sturts2为了简化我们的开发,也为我们提供了UI标签-也就是显示页面的标签-.. 但是呢,Struts2是服务端的框架,因此使用页面的标签是需要在服务器端解析然后再被浏览器 ...

  9. 01_ExtJS_HelloWorld

    1, 什么是Ext? Ext是一个Ajax框架,用于在客户端创建丰富多彩的web应用程序界面,是在Yahoo! UI的基础上发展而来的.官方网址:http://www.extjs.com/ 现在改为: ...

  10. birt IE8 IE9 兼容问题

    我自己的应用,birt展示报表的时候,在firefox和IE下显示的样式: IE8下的: Firefox下的: 我的项目,应用birt部分的结构如下: 1, prototype.js ,查找下面这段代 ...