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

思路:选中作品,将作品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)--简单投票系统的更多相关文章

  1. vue,一路走来(1)--构建vue项目

    2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...

  2. vue,一路走来(3)--数据交互vue-resource

    所有的静态页面布局完成后,最重要的就是数据交互了,简单来说,vue-resource就像jquery里的$.ajax,用来和后台交互数据的.放在created或ready里运行来获取或者更新数据的.不 ...

  3. vue,一路走来(2)--路由vue-router

    安装 Mint UI cnpm install mint-ui --save 如果你的项目会用到 Mint UI 里较多的组件,最简单的方法就是把它们全部引入.此时需要在入口文件 main.js 中: ...

  4. vue,一路走来(17)--vue使用scss,并且全局引入公共scss样式

    最近朋友问如何在vue项目中使用scss样式,想起之前项目是直接在main.js直接import css文件的,然而main.js不可以直接import scss文件. import './asset ...

  5. vue,一路走来(17)--底部tabbar切换

    <router-link></router-link>存在router-link-active属性,那么底部tabbar切换就简单多了.不会再出现刷新回到第一个的bug. &l ...

  6. vue,一路走来(16)--本地及手机调试

    闲暇时间记录一下如何绑定域名,实现本地及手机调试的过程.我的是微信开发项目,很多功能及操作都是基于微信来开发的,理所当然的就用到微信开发者工具了. 1.首先打开目录C:\Windows\System3 ...

  7. vue,一路走来(13)--vue微信分享

    vue微信分享 今天记录一下vue微信分享. 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.这个不多说,见文档,只有绑定了才能进行下一步的动作 2.需要引入js文件 ...

  8. vue,一路走来(12)--父与子之间传参

    今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionno ...

  9. vue,一路走来(7)--响应路由参数的变化

    今天描述的问题估计会有很多人也遇到过. vue-router多个路由地址绑定一个组件造成created不执行 也就是文档描述的,如下图 我的解决方案: created () { console.log ...

随机推荐

  1. 机器学习:2.NPL自然语言处理

    1. 词带的简单解释: 每一个词出现了多少次,缺点是不知道顺序 2.seq2seq自然语言处理的核心 RNN: 一对一:输入一个,输出一个 一对多:输入一个,输出多个 多对一:输入多个,输出一个 多对 ...

  2. springboot 整合Druid

    Druid连接池监控配置 1) 引入依赖 <!-- https://mvnrepository.com/artifact/com.alibaba/druid --> <depende ...

  3. web框架之初识Django

    目录 一.web框架 1.1什么是web框架 1.2自制的简易web框架 1.3三大主流web框架简介 Django Flask Tornado 1.4动态网页与静态网页 二.初识Django框架 2 ...

  4. SQL Server 中用While循环替代游标Cursor的解决方案

    在编写SQL批处理或存储过程代码的过程中,经常会碰到有些业务逻辑的处理,需要对满足条件的数据记录逐行进行处理,这个时候,大家首先想到的方案大部分是用“游标”进行处理. 举个例子,在订单管理系统中,客服 ...

  5. 20180802-Java 方法

    Java 方法 下面的方法包含2个参数num1和num2,它返回这两个参数的最大值. /** 返回两个整型变量数据的较大值**/ public static int max(int num1,int ...

  6. sqlserver常用命令-4

    原文: https://www.cnblogs.com/yunspider/p/7719714.html 常用命令 #查看数据库所有表的行数 SELECT A.NAME ,B.ROWS FROM sy ...

  7. Sultana后记:纯css也能写col,select,datepicker,carousel...

    未完待续 背景 如今css3越来越发达,focus-within等属性也已经开始在Chrome得到支持.如果有出色的css功底,一点点ps技能,你也能用css3配合原生html标签写出优秀的框架.通过 ...

  8. windown 使用python 自动切换网络

    由于工作环境的特殊性,有时需要切换到内网工作,有时需要通过手机连接外网,想自动运行一个脚本就做完这事 首先在PC机上安装一个无线网卡,例如360wifi就可以. 除了python,还用到了DOS命令, ...

  9. lnmp环境下 tp3.2 not found

    最近将一个lamp环境下使用tp3.2 开发的项目迁移到本地了, 但是在打开项目的时候,提示 not found,经过多方面查找发现是伪静态问题,解决方法如下: 在nginx 域名配置文件我这里是[v ...

  10. Spring Boot 获取 java resources 下文件

    Spring Boot 获取 java resources 下文件 Spring Boot 获取 resources 目录下的目录(例:获取 resources 目录下的 template 目录): ...