vue多選/單選效果

轉(zhuǎn):https://blog.csdn.net/Number7421/article/details/81002729

不過(guò)我以前都寫(xiě)過(guò)這三種方法了沃琅,很pang額求妹,怕之后忘記了,偷個(gè)懶拿別人的弛随,以免以后忘記了

一流部、單選:

思路:當(dāng)點(diǎn)擊的索引值 == v-for循環(huán)的索引值時(shí)济赎,給你那個(gè)li添加選中樣式

html:

<ul class="box">
    <li v-for="c,index of cities" :class="{checked:index==n}" @click="changeList(index)">{{c}}</li>
</ul>

CSS樣式如下:

<style type="text/css">
body{margin:0;}
ul{
    padding:0; list-style:none; 
    margin:150px 150px;
}
li{
    width:80px; height:50px; 
    display:inline-block;
    border-radius:8px; border:1px #000 solid;
    text-align:center; line-height:50px;
    cursor:pointer; 
    transition:all 0.3s linear;
    margin-left:5px;
}
li:hover{
    background-color:#0CF; color:#fff; 
    border:1px #fff solid;
}    
li.checked{
    background-color:#0CF; color:#fff; 
    border:1px #fff solid;
}
</style>

js:

var app = new Vue({
    el : ".box",
    data : {
        cities : ["上海","北京","廣州","重慶","西安"],
        n : 0
    },
    methods :{
        changeList(index){
            this.n = index;//this指向app
        }
    }
})
image.png

二导狡、多選

方法一和方法二的主要的區(qū)別在于數(shù)據(jù)中有沒(méi)已有標(biāo)注是選中狀態(tài)還是未選中狀態(tài)

CSS樣式如下:

<style type="text/css">
body{margin:0;}
.box{ margin:150px 150px;}
ul{
    padding:0; 
    list-style:none;
}
li{
    width:50px; height:30px; display:inline-block;
    text-align:center; line-height:30px;
    cursor:pointer;margin-left:5px;
}
li:before{ 
    display:inline-block; width:10px; height:10px; 
    line-height:10px; content:""; border:1px #000 solid; 
    margin-right:2px; transition:all 0.3s linear;
}    
li.checked:before{ 
    background-color:#0CF; 
    border:1px #fff solid;
}
li.checked{color:#0CF;}
</style>

方法一:

思路:新增一個(gè)新的空數(shù)組arr(arr的里元素的索引值表示约巷,表示該索引值對(duì)應(yīng)的li已經(jīng)處于被選中狀態(tài)),如果arr數(shù)組沒(méi)有點(diǎn)擊的索引值旱捧,就添加到arr數(shù)組里独郎,如果有就把這個(gè)索引,就把這個(gè)索引從數(shù)組中刪除廊佩。

html:

<ul class="box">
<li v-for="c,index of cities" :class="{checked:arr.includes(index)}" @click="checkedBox(index)">{{c}}</li>
</ul>

js:

var app = new Vue({
    el : ".box",
    data : {
        cities : ["上海","北京","廣州","重慶","西安"],
        arr : []
    },
    methods :{
        checkedBox(i){
            if(this.arr.includes(i)){
                //includes()方法判斷是否包含某一元素,返回true或false表示是否包含元素囚聚,對(duì)NaN一樣有效
                //filter()方法用于把Array的某些元素過(guò)濾掉,filter()把傳入的函數(shù)依次作用于每個(gè)元素标锄,然后根據(jù)返回值是true還是false決定保留還是丟棄該元素:生成新的數(shù)組
                this.arr=this.arr.filter(function (ele){return ele != i;});
            }else{
                this.arr.push(i);
            }
        }
    }
})

方法二:

思路:這個(gè)就更加通俗易懂了,把點(diǎn)擊的那個(gè)是否選中的標(biāo)志取反就可以了

html:

<ul class="box">
    <li v-for="c,index of cities"
    :class="{checked:c.bOn}"
    @click="checkbox(index)">{{c.city}}</li>
</ul>

js:

var app = new Vue({
    el : ".box",
    data : {
        cities : [{city:"北京",bOn:false},
        {city:"上海",bOn:false},
        {city:"重慶",bOn:false},
        {city:"廣州",bOn:false},
        {city:"西安",bOn:false}]
    },
    methods : {
        checkbox(i){
            this.cities[i].bOn = !this.cities[i].bOn;
        }
    }
})
image.png

項(xiàng)目實(shí)戰(zhàn)代碼

<template>
    <div>
        <van-search
            v-model="value"
            shape="round"
            show-action
            placeholder="編號(hào)/品種/規(guī)格/產(chǎn)地"
            @search="onSearch"
        >
            <template #action>
                <div @click="onSearch" class="onSearchBtn">搜索</div>
            </template>
        </van-search>
        <div class="tips">
            已選 ({{ton}}噸/{{num}}件)
        </div>
        <div class="resultBox">
            <ul>
                <van-list
                v-model="loading"
                :finished="finished"
                finished-text="沒(méi)有更多了"
                @load="getStockLists"
                >
                    <li v-for="(item,index) in list">
                        <div class="resultBoxTit">
                            <div>
                                <span class="resultBoxNum">{{item.good_sn}}</span>
                                <span class="resultBoxPosition">{{item.stock_seat}}</span>
                            </div>
                            <div @click="son(item,index)">
                                <div v-if="arr.some(({id})=>id==item.id)" class="resultBoxRemove">取消添加</div>
                                <div v-else class="resultBoxAdd">+添加</div>
                            </div>
                        </div>
                        <div class="resultBoxContent">
                            <div class="resultBoxProduct">
                                <div class="van-ellipsis ellipsisOne">
                                    {{item.cat_name}}
                                </div>
                                <div class="van-ellipsis ellipsisTwo">
                                    {{item.spec_name}}
                                </div>
                                <div class="van-ellipsis ellipsisThree">
                                    {{item.brand_name}}
                                </div>
                                <div class="van-ellipsis ellipsisFour">
                                    {{item.type_name}}
                                </div>
                            </div>
                            <div class="resultBoxProduct">
                                <div>
                                    <span>抄碼/過(guò)磅:{{item.show_weight}}噸/{{item.weigh_weight}}噸</span>
                                </div>
                                <div>
                                    {{item.number | parseIntData}}捆
                                </div>
                            </div>
                        </div>
                    </li>
                </van-list>
            </ul>
        </div>
        <div class="footerBtn">
            <div class="footerBtnTop" @click="hideOutBox">
                完成
            </div>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
    export default {
        props: ["newArr"],
        data() {
            return {
                value: '',
                list:[],
                loading: false,
                finished: false,
                page:1,
                arr:[], //多選保存的數(shù)組
            };
        },
        watch: {
            //監(jiān)聽(tīng)父組件的刪除列表變化茁计,重新賦值
            newArr(newVal,oldVal){
                this.arr = newVal
            }
        },
        computed: {
            num: function () {
                var sum = 0
                for (let index = 0; index < this.arr.length; index++) {
                    sum += parseInt(this.arr[index].number)*1
                }
                return sum
            },
            ton: function () {
                var sum = 0
                for (let index = 0; index < this.arr.length; index++) {
                    // sum += parseFloat(this.arr[index].show_weight)*1
                    sum += (parseFloat(this.arr[index].show_weight)*10)/10;
                }
                return sum.toFixed(3)
            }
        },
        filters: {
            parseIntData: function (value) {
                return parseInt(value)
            }
        },
        mounted() {
            this.getStockLists();
        },
        methods: {
            son(item,i){
                if(this.arr.some(({id})=>id==item.id)){
                    this.arr= this.arr.filter(function (ele){
                        return ele.id != item.id
                    });
                }else{
                    this.arr.push(item);
                }
            },
            hideOutBox(){
                this.$emit('arr',this.arr)
                this.$emit('hideOutBox',false)
            },
            onSearch(val) {
                this.page = 1
                // this.arr = []
                this.list = []
                this.getStockLists();
            },
            //獲取添加貨物數(shù)據(jù)數(shù)組
            getStockLists(){
                this.value = this.value.trim() //去掉搜索框的空格
                this.http.get(this.api.stocks_getStockLists,{
                    keyword :this.value,
                    page :this.page,
                    limit :''
                })
                .then(res => {
                    if(this.value != ''){
                        this.finished = false;
                        if(res.data.lists == ''){
                            this.list =res.data.lists
                            this.finished = true;
                        }else{
                            var newLists = [].concat(this.list,res.data.lists)
                            this.list = newLists
                            this.page = this.page+1
                            // 加載狀態(tài)結(jié)束
                            this.loading = false;
                            if (Math.ceil(this.list.length/20) >= res.data.total) {
                                this.finished = true;
                            }
                        } 
                    }else{
                        var newLists = [].concat(this.list,res.data.lists)
                        this.list = newLists
                        this.page = this.page+1
                        // 加載狀態(tài)結(jié)束
                        this.loading = false;
                        if (Math.ceil(this.list.length/20) >= res.data.total) {
                            this.finished = true;
                        }
                    }
                });
            }
        }
    }
</script>

<style scoped>
.onSearchBtn{
    color: #007ce6;
    font-size: 16Px;
}
.tips{
    text-align: center;
    height: 60px;
    line-height: 60px;
}
/* 列表 */
.resultBox{

}
.resultBox li{
    background: #fff;
    padding: 15Px;
    font-size: 14Px;
    margin-bottom: 20px;
}
.resultBoxTit{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.resultBoxNum{
    font-size: 16Px;
    margin-right: 50px;
}
.resultBoxPosition{
    color: #666666;
}
.resultBoxAdd{
    background: #007ce6;
    border-radius: 4Px;
    color: #fff;
    padding: 6Px 16Px;
}
.resultBoxContent{
    background: #f4faff;
    padding: 0 15Px;
}
.resultBoxProduct{
    display: flex;
    justify-content: space-between;
    padding: 15Px 0;
}
.resultBoxProduct:first-child{
    border-bottom: 1Px solid #eff2f4;
}
.ellipsisOne{
    width: 130px;
}
.ellipsisTwo{
    width: 300px;
}
.ellipsisThree{
    width: 80px;
}
.resultBoxRemove{
    background: red;
    border-radius: 4Px;
    color: #fff;
    padding: 6Px 16Px;
}
/* 列表結(jié)束 */
.footerBtn{
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    width: 100%;
    border-top: 1Px solid #e2e2e2;
    height: 126px;
    display: flex;
    padding: 10Px 15Px;
    box-sizing: border-box;
    justify-content: space-between;
}
.footerBtnTop{
    background: #007ce6;
    border-radius: 4Px;
    width: 100%;
    font-size: 16Px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
</style>

image.png

image.png

在搜索頁(yè)面點(diǎn)擊拿到數(shù)據(jù)料皇,點(diǎn)完成,要把數(shù)據(jù)帶到上一個(gè)頁(yè)面星压。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末践剂,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子娜膘,更是在濱河造成了極大的恐慌逊脯,老刑警劉巖,帶你破解...
    沈念sama閱讀 210,978評(píng)論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件竣贪,死亡現(xiàn)場(chǎng)離奇詭異军洼,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)演怎,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,954評(píng)論 2 384
  • 文/潘曉璐 我一進(jìn)店門(mén)匕争,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人爷耀,你說(shuō)我怎么就攤上這事甘桑。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 156,623評(píng)論 0 345
  • 文/不壞的土叔 我叫張陵跑杭,是天一觀的道長(zhǎng)铆帽。 經(jīng)常有香客問(wèn)我,道長(zhǎng)德谅,這世上最難降的妖魔是什么锄贼? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,324評(píng)論 1 282
  • 正文 為了忘掉前任,我火速辦了婚禮女阀,結(jié)果婚禮上宅荤,老公的妹妹穿的比我還像新娘。我一直安慰自己浸策,他們只是感情好冯键,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,390評(píng)論 5 384
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著庸汗,像睡著了一般惫确。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上蚯舱,一...
    開(kāi)封第一講書(shū)人閱讀 49,741評(píng)論 1 289
  • 那天改化,我揣著相機(jī)與錄音,去河邊找鬼枉昏。 笑死陈肛,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的兄裂。 我是一名探鬼主播句旱,決...
    沈念sama閱讀 38,892評(píng)論 3 405
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼晰奖!你這毒婦竟也來(lái)了谈撒?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,655評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤匾南,失蹤者是張志新(化名)和其女友劉穎啃匿,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體蛆楞,經(jīng)...
    沈念sama閱讀 44,104評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡溯乒,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了臊岸。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片橙数。...
    茶點(diǎn)故事閱讀 38,569評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖帅戒,靈堂內(nèi)的尸體忽然破棺而出灯帮,到底是詐尸還是另有隱情崖技,我是刑警寧澤,帶...
    沈念sama閱讀 34,254評(píng)論 4 328
  • 正文 年R本政府宣布钟哥,位于F島的核電站迎献,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏腻贰。R本人自食惡果不足惜吁恍,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,834評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望播演。 院中可真熱鬧冀瓦,春花似錦、人聲如沸写烤。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,725評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)洲炊。三九已至感局,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間暂衡,已是汗流浹背询微。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,950評(píng)論 1 264
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留狂巢,地道東北人撑毛。 一個(gè)月前我還...
    沈念sama閱讀 46,260評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像隧膘,于是被迫代替她去往敵國(guó)和親代态。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,446評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 前端開(kāi)發(fā)面試題 面試題目: 根據(jù)你的等級(jí)和職位的變化疹吃,入門(mén)級(jí)到專家級(jí),廣度和深度都會(huì)有所增加西雀。 題目類型: 理論知...
    怡寶丶閱讀 2,572評(píng)論 0 7
  • 概要 64學(xué)時(shí) 3.5學(xué)分 章節(jié)安排 電子商務(wù)網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,125評(píng)論 0 3
  • 前端開(kāi)發(fā)知識(shí)點(diǎn) HTML&CSS對(duì)Web標(biāo)準(zhǔn)的理解萨驶、瀏覽器內(nèi)核差異、兼容性艇肴、hack腔呜、CSS基本功:布局、盒子模型...
    Hebborn_hb閱讀 843評(píng)論 0 1
  • 一:認(rèn)識(shí)jquery jquery是javascript的類庫(kù)再悼,具有輕量級(jí)核畴,完善的文檔,豐富的插件支持冲九,完善的Aj...
    xuguibin閱讀 1,706評(píng)論 1 7
  • 一谤草、JS前言 (1)認(rèn)識(shí)JS 也許你已經(jīng)了解HTML標(biāo)記(也稱為結(jié)構(gòu))跟束,知道了CSS樣式(也稱為表示),會(huì)使用HT...
    凜0_0閱讀 2,755評(píng)論 0 8