zoukankan      html  css  js  c++  java
  • 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 = 0; 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 = 0, 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=0; i<this.length; i++) { if(this[i] == val) { this.splice(i, 1); 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')) },
  • 相关阅读:
    Webstorm(OnlineSearch2)自定义快捷搜索API文档手册
    cargo设置国内源
    win10安装rust和编译失败的解决办法
    pycharm打开项目找不到根目录的解决办法
    VM虚拟机/Linux上网
    idea启动springboot项目突然特别慢
    (亲测有效)MacPycharm打不开的解决方法
    vue使用webpack打包失败
    使用七牛云上传文件报错incorrect region, please use up-z1.qiniup.com
    Zookeeper3.5及以上启动时8080端口被占用
  • 原文地址:https://www.cnblogs.com/juewuzhe/p/7885869.html
Copyright © 2011-2022 走看看