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

后台返回的数据为 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. 汇编指令-位置无关码(BL)与绝对位置码(LDR)(2)

    位置无关码,即该段代码无论放在内存的哪个地址,都能正确运行.究其原因,是因为代码里没有使用绝对地址,都是相对地址.  位置相关码,即它的地址与代码处于的位置相关,是绝对地址 BL :带链接分支跳转指令 ...

  2. Python输入输出练习,运算练习,turtle初步练习

    Hello World! 简单交互(交互式,文件式)教材P19 radius=25 area=3.1415*radius*radius print(area) print('{:.2f}'.forma ...

  3. 初入PHP,(for循环~水仙花数)

    找出100-999之间的所有"水仙花数".所谓水仙花数是指一个三位 数,各位数字的立方和等于该数本身.(如153次方=1的3次方+5的3次方+3的3次方)并输出这些数字 想想153 ...

  4. 201521123088 《Java程序设计》第1周学习总结

    第1周学习总结 1.本周学习总结本周我们正式开始了对一门新的编程语言java的学习.Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此J ...

  5. 201521123077 《Java程序设计》第13周学习总结

    1. 本周学习总结 1.1以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 介绍的传输层协议 : TCP 可靠:具有失败重传功能 开销较大:需要建立链路 需要维持传输中的关系 ...

  6. JAVA课程设计 学生成绩管理

    学生成绩管理 可实现功能: 添加学生功能:姓名.学号.性别.出生年月日.(学号自动生成且唯一) 添加学生成绩功能:每个人都有数学.Java与体育四门课,可分课程输入成绩. 根据学生学号查找学生成绩功能 ...

  7. cnpack热键

    CnPack的热键为ALt+space,当不自动补齐时按下Alt+space则会补齐

  8. [07] String字符串

    1.相同又不同的字符串 String str1 = new String("String"); String str2 = "String"; String s ...

  9. 如何用SQL实现组内前几名的输出

    关于问题 如何查询组内最大的,最小的,大家或许都知道,无非是min.max的函数使用.可是如何在MySQL中查找组内最好的前两个,或者前三个? 什么是相关子查询 在提出对于这个问题的对应方法之前,首先 ...

  10. 常见注入手法第一讲EIP寄存器注入

    常见注入手法第一讲EIP寄存器注入 博客园IBinary原创  博客连接:http://www.cnblogs.com/iBinary/ 转载请注明出处,谢谢 鉴于注入手法太多,所以这里自己整理一下, ...