今天记录一下简单的投票系统,主要实现选中至少五张作品,并提交投票。

思路:选中作品,将作品id存入到数组里。 取消投票,则从数组中移除该作品id。

如图效果:

 <li v-for="(opu,index) in opus">
<router-link :to="{ name: 'voteDetail', params: { id: opu.id }}" :id="opu.id">
<div class="opus-img">
<img v-bind:src="opu.thumb" alt="">
<span class="num-select">
{{opu.votes}}票
</span>
</div>
<div class="author clearfix">
<ul>
<li style="text-align:left;">{{opu.xingming}}</li>
<li style="color:#5eb95e;font-size:14px;">{{opu.bianhao}}号</li>
<li style="text-align:right;">{{opu.nianling}}</li>
</ul>
</div>
</router-link>
<div v-bind:class="{btnSelectauthod:isInArray(resultgroup,opu.id)}" class="nobtn-select-authod" @click="postSupport(opu.id)"><span v-if="!isInArray(resultgroup,opu.id)">{{textconfirm}}</span><span v-else>{{notextconfirm}}</span></div>
</li>
   // 判断数组是否有某个元素
isInArray(arr,value){
for(var i = ; i < arr.length; i++){
if(value === arr[i]){
return true;
}
}
return false;
},
//选择作品投票按钮
postSupport(num){
this.group.push(num);
this.resultgroup = [];
var hash = {};
for (var i = , elem; (elem = this.group[i]) != null; i++) {
// 排除重复元素
if (!hash[elem]) {
this.resultgroup.push(elem);
hash[elem] = true;
}else{
// 清除指定元素
Array.prototype.removeByValue = function(val) {
for(var i=; i<this.length; i++) {
if(this[i] == val) {
this.splice(i, );
break;
}
}
}
this.resultgroup.removeByValue(elem);
hash[elem] = false;
}
}
// console.log(this.isInArray(this.resultgroup,'9529')) 是否存在9529
window.sessionStorage.setItem('resultgroup',JSON.stringify(this.resultgroup))
// console.log(sessionStorage.getItem('resultgroup'))
},

最新文章

  1. C语言之链表list
  2. Windows Server配置Jenkins,实现监测SVN提交自动构建.net4.5的项目
  3. 将公司的主要项目从eclipse迁移到android studio for mac环境(2)
  4. C++笔记----构造函数与析构函数(三)
  5. 利用Aspose.Cell控件导入Excel非强类型的数据
  6. [转载] linux 速查表
  7. Android(java)学习笔记245:ContentProvider使用(银行数据库创建和增删改查的案例)
  8. Couchbase 上手nosql for .net
  9. 解读机器学习基础概念:VC维的来龙去脉 | 数盟
  10. 灵活运用Zend框架
  11. Gradle之恋-命令行详解
  12. Java 中的语法糖
  13. leetcode 697. Degree of an Array
  14. BZOJ 3879: SvT [虚树 后缀树]
  15. DataTable行列转置
  16. protocol buffer开发指南(官方)
  17. lsb隐写
  18. http 返回码 405 解决方案之一
  19. map/multimap_01
  20. 微信小程序的经纬度不想写死,需要转成number类型不能用浮点型

热门文章

  1. Mybatis之:SqlSessionFactory、SqlSession
  2. struts2的相关知识(实现原理、拦截器)
  3. hdu 6044 : Limited Permutation (2017 多校第一场 1012) 【输入挂 组合数学】
  4. PL/SQL 条件控制
  5. BZOJ 4804: 欧拉心算 欧拉函数
  6. CF889 E Mod Mod Mod——DP
  7. json和list转换
  8. 简易的Web自动化链接测试(Xenu)
  9. MySQL部分索引
  10. Linux 软件安装到哪里合适,目录详解