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

后台返回的数据为 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. ES6块级作用域

    块级作用域的优点 避免变量冲突,比如程序中加载了多个第三方库的时候,如果没有妥善地将内部私有函数或变量隐藏起来,就很容易引发变量冲突: 可以方便的进行模块管理: 利于内存回收:(块级作用域里声明的变量 ...

  2. 图论中DFS与BFS的区别、用法、详解?

    DFS与BFS的区别.用法.详解? 写在最前的三点: 1.所谓图的遍历就是按照某种次序访问图的每一顶点一次仅且一次. 2.实现bfs和dfs都需要解决的一个问题就是如何存储图.一般有两种方法:邻接矩阵 ...

  3. 201521123104 《JAVA程序设计》第二周学习总结

    1. 本周学习总结 认识了JAVA编程中一些类型与变量,了解了一些基本运算符的使用 变量在命名时,不可以使用数字或一些特殊字符作为开头 不可以声明局部变量后未指定任何值给它之前就使用变量 在程序中写下 ...

  4. JAVA课程设计猜数游戏 个人

    1.团队课程设计博客链接 https://i.cnblogs.com/EditPosts.aspx?postid=7067843&update=1 2.个人负责模块说明 输入用户ID 2.主要 ...

  5. 201521123049 《JAVA程序设计》 第10周学习总结

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

  6. JSP第二篇【内置对象的介绍、4种属性范围、应用场景】

    什么是JSP内置对象 JSP引擎在调用JSP对应的jspServlet时,会传递或创建9个与web开发相关的对象供jspServlet使用.JSP技术的设计者为便于开发人员在编写JSP页面时获得这些w ...

  7. 通过Xshell登录远程服务器实时查看log日志

    主要想总结以下几点: 1.如何使用生成密钥的方式来登录Xshell连接远端服务器 2.在远程服务器上如何上传和下载文件(下载log文件到本地) 3.如何实时查看log,提取错误信息 一.  使用生成密 ...

  8. Oracle--新建用户以及赋予的权限

    1, 以dba方式登录Oracle 2, 创建用户,Users-->New ... 输入用户名和密码 3, 赋予connect/resource角色 4, 赋予该用户 对视图操作的相关权限 以下 ...

  9. python3中的编码与解码用法

    #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = '人生入戏' #python3在编码时会把str编码成utf-8的bytes类型 ...

  10. 关于APP分享到QQ、微信等

    <script> var shares=null;        var Intent=null,File=null,Uri=null,main=null; function plusRe ...