vue 实现 换一换 功能
点击按钮列表页随机获取三个商品并渲染
后台返回的数据为 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 实现 换一换 功能的更多相关文章
- vue换一换功能原型
<html> <meta charset="utf-8"> <head> <script src="https://cdn.bo ...
- Unity里的人物驱动/换装备/换武器/换衣服/卡通重定位(转)
Unity里的人物驱动/换装备/换武器/换衣服/动画重定位 刚学的过程被这个问题困扰最多. 首先,基本的,大家都知道驱动人物需要骨架.绑骨的Mesh和动画(这三个要是不知道的话就得考虑看看计算机图形学 ...
- 今天抠图,Python实现一键换底片!想换什么换什么(附源码)
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 生活中我们会拍很多的证件照,有的要求红底,有的是白底,有的是蓝底,今天不通 ...
- [转]搬瓦工换机房换ip之后不能连外网
搬瓦工换机房换ip之后不能连外网 时间 2015-07-21 15:17:16 Wendal随笔 原文 http://wendal.net/2015/07/21.html 主题 iptables ...
- jq验证码换一换
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-e ...
- Vue (二) --- Vue对象提供的属性功能
--------------------------------------------不是井里没有水,而是你挖的不够深. 3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者 ...
- vue 对象提供的属性功能、通过axio请求数据(2)
1 Vue对象提供的属性功能 1.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 1.1.1 使用Vue.filter()进行全局定义(全局 ...
- vue教程2-07 微博评论功能
vue教程2-07 微博评论功能 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- [转]***换机房换ip之后不能连外网
***换机房换ip之后不能连外网 时间 2015-07-21 15:17:16 Wendal随笔 原文 http://wendal.net/2015/07/21.html 主题 iptables ...
- Vue+Vuex 实现自动登录功能
刚刚实现了Vue+Vuex的自动登录功能,在实现的时候遇到了一些问题,这里记录一下: 因为这个还不够完善,在写完下列代码后,又进行了补充,可以从https://www.cnblogs.com/xiao ...
随机推荐
- JS中window.showModalDialog()详解(转)
window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框. window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框. ...
- 自己编写服务启动脚本(一):functions文件详细分析和说明
本文目录: 1.几个显示函数2.action函数3.is_true和is_false函数4.confirm函数5.pid检测相关函数 5.1 checkpid.__pids_var_run和__pid ...
- 为什么可以通过URL来调起APP - URL Scheme和Intent
在手机浏览器中可以通过URL调起APP是不是很神奇?这篇文章就告诉你为什么. URL Scheme 先从前端能接触到的URL Scheme分析一下 丢wiki:https://en.wikipedia ...
- web服务的三大主流架构
1.远程过程调用 2.服务导向架构 3.表述性状态转移 今天在自学Spring架构时貌似发现 rest的表现.与RPC方式的最大差别,SOA方式更加关注如何去连接服务而不是去特定某个实现的细节.而re ...
- NullpointerException处理
毫无疑问,空指针NullpointerException是我们最常遇到异常,没有之一! 在刚进入编程职业时,我想,大部分刚进入的同学肯定会受到前辈们的叮咛:一定要防止空指针,这是个低级错误.你们不是? ...
- 201521123087 《java程序设计》 第七周学习总结
1. 本周学习总结 2. 书面作业 ArrayList代码分析1.1 解释ArrayList的contains源代码 ...
- Java 第五周总结
1. 本周学习总结 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过?哪句会出现错误?试改正该错误.并分析输出结果. 不能. ...
- Python IDLE快捷键一览
编辑状态时:Ctrl + [ .Ctrl + ] 缩进代码Alt+3 Alt+4 注释.取消注释代码行Alt+5 Alt+6 切换缩进方式 空格<=>TabAlt+/ 单词完成,只要文中出 ...
- 2017JAVA课程设计
1.团队课程设计博客链接 http://www.cnblogs.com/ltykm/p/7063663.html 2.个人负责模块或任务说明 本人任务:定时器具体功能的实现 3.自己的代码提交记录截图 ...
- 201521123029《Java程序设计》第十周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...