vue,一路走来(15)--简单投票系统
今天记录一下简单的投票系统,主要实现选中至少五张作品,并提交投票。
思路:选中作品,将作品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'))
},
vue,一路走来(15)--简单投票系统的更多相关文章
- vue,一路走来(1)--构建vue项目
2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...
- vue,一路走来(3)--数据交互vue-resource
所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不 ...
- vue,一路走来(2)--路由vue-router
安装 Mint UI cnpm install mint-ui --save 如果你的项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入.此时需要在入口文件 main.js 中: ...
- vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式
最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...
- vue,一路走来(17)--底部tabbar切换
<router-link></router-link>存在router-link-active属性,那么底部tabbar切换就简单多了.不会再出现刷新回到第一个的bug. &l ...
- vue,一路走来(16)--本地及手机调试
闲暇时间记录一下如何绑定域名,实现本地及手机调试的过程.我的是微信开发项目,很多功能及操作都是基于微信来开发的,理所当然的就用到微信开发者工具了. 1.首先打开目录C:\Windows\System3 ...
- vue,一路走来(13)--vue微信分享
vue微信分享 今天记录一下vue微信分享. 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.这个不多说,见文档,只有绑定了才能进行下一步的动作 2.需要引入js文件 ...
- vue,一路走来(12)--父与子之间传参
今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionno ...
- vue,一路走来(7)--响应路由参数的变化
今天描述的问题估计会有很多人也遇到过. vue-router多个路由地址绑定一个组件造成created不执行 也就是文档描述的,如下图 我的解决方案: created () { console.log ...
随机推荐
- A1001
两数相加,结果每三位添加一个逗号.一开始没有注意到%03d的问题,因为有某些数据逗号分割后高位带0,因此需要用0来补充空位. #include<iostream> #include< ...
- Linux学习-MySQL的高可用性集群Galera Cluste
一.Galera Cluste简介 1.Galera Cluster 集成了Galera插件的MySQL集群,是一种新型的,数据不共享的,高度冗余的高可用方案,目前Galera Cluster有两个版 ...
- DELPHI 调试IOS时出现 Please specify exact device preset UUID
右击设备DEVICE, 选择REFRESH刷新, 再重新选择一个设备即可.
- SSM项目web.xml等配置文件中如何查找类的全路径名?
如题, web.xml,applicationContext.xml 等配置文件中,有时不会出现自动提示类的名字,这时如何查找类的全路径名,如下图所示: 1.鼠标右键单击菜单栏Navigate选项,选 ...
- 关于富文本复制word,里面掺杂图片上传的问题
图片的复制无非有两种方法,一种是图片直接上传到服务器,另外一种转换成二进制流的base64码目前限chrome浏览器使用首先以um-editor的二进制流保存为例:打开umeditor.js,找到UM ...
- nginx: [emerg] open() "/var/run/nginx/nginx.pid" failed (2: No such file or directory)
测试服务器 问题描述 [root@g-s-- nginx]# /usr/sbin/nginx -c /etc/nginx/nginx.conf open() : No such file or dir ...
- [hadoop](1) MapReduce:ChainMapper
前言 本章主要讲述的是对于hadoop生态系统中,MapReduce写的ChainMapper的学习.MapReduce是hadoop集群数据处理的默认框架.而对于数据集中所有的数据必然有一些不友好的 ...
- [CSP-S模拟测试]:周(week)(搜索)
题目描述 退役之后,$liu\_runda$总会想起学$OI$的时候自己怎样被郭神虐爆……$liu\_runda$学文化课的时候想要学$OI$,学$OI$的时候想要学文化课.为了解决矛盾,他决定以周为 ...
- PHP Trait特性
php类的单继承性,无法同时从两个基类中继承属性和方法,为了解决这个问题,使用Trait特性解决. Trait是一种代码复用技术,为PHP的单继承限制提供了一套灵活的代码复用机制. 用法:通过在类中使 ...
- BF语言学习
Brainfuck是一种极小化的计算机语言,它是由Urban Müller在1993年创建的.由于fuck在英语中是脏话,这种语言有时被称为brainf*ck或brainf**k,甚至被简称为BF.这 ...