vue原生指令v-model實現自定義樣式の多選與單選

說好的下篇來了~

看上邊這句話很唐突的朋友可以先移駕看看這篇文章的背景：

使用v-model和原生表單也可以實現這麼好看且達到需求的效果。

重要的是不用自己跟在使用者屁股後面屁顛屁顛的監聽人家到底何時用了點選事件，又把點選事件用在何處了！

效果圖如下，和之前的沒什麼兩樣呢！

具體實現我想，vue官網有關於繫結的講解和demo，事實上，我只要做到利用他的demo把我的資料和樣式調整一下就萬事大吉了！

沒有什麼比簡單解決一個功能更讓人開心的了！

說幹就幹，我直接在原來專案程式碼的基礎上動手：

之前的選項處理就一個li孤軍奮戰，資料渲染、樣式切換、包括點選事件都繫結在上邊，

ul.qus-list  
    li(v-for="(item,index) in state.ExamInfo.QuestionAnswerCode" @click="choosed(index)" v-bind:class="{'li-focus' : chooseNum==index}" ref="liId") {{item.Code}}、{{item.Description}}

 簡直忙到沒朋友啊有沒有！光他和ul的長度差距就說明了一切！

 

現在我們把他要做的事分解一下：

現在他只負責v-for迴圈資料渲染

ul.qus-list  
    li(v-for="(item,index) in state.ExamInfo.QuestionAnswerCode" v-bind:class="{'li-focus' : chooseNum==index}")

內部生了兩個孩子：

input:radio/checkbox 和 label，這倆人一個負責點選後與資料的繫結，一個負責樣式。

這麼一說大神就明瞭了，好你可以走了，把沙發騰出來。

這倆人中，Input負責資料繫結，其實也就是利用v-model。具體原理直接看

input( type="radio" :value="item.Code" :id="'choice1'+index" v-model="picked")

然後label負責樣式。樣式也包括使用者看到的選項文字的展示：

label(:for="'choice1'+index" class="choice-item") {{item.Code}}、{{item.Description}}

至於他具體怎麼負責樣式？這個也利用了css的選擇器

主要是:checked選擇器和 相鄰兄弟選擇器+符號 

/*普通樣式*/
 .choice-item {
    display: block;
    margin: .2rem auto 0;
    padding: .3rem .3rem .34rem;
    color: $qusTxt;
    font-size: .34rem;
    text-align: center;
    @include boxStyle(1rem, .12rem, rgba(49, 32, 114, 0.16));}

/*input被選中時，label的樣式*/
input:checked + .choice-item {  
    background: $purpleClr;  
    color: #FFF;
}

於是就有了這樣的樣式：

這裡可以看出，二者是相互成就的關係：

首先透過html那裡，label的for屬性和input的id屬性關聯，使得點選label的時候，input也就被選擇上了。
然後是css樣式這裡，label除了自己正常的樣式，還受input被選中狀態的影響，當input被選中後（input:checked）,作為input在li爸爸內部的唯一兄弟元素（+選擇符），label的樣式就被重新更新了選中態。

因為選中展示的效果被label做了，那麼input也就可以歸隱山林，幽享田園生活了。所以直接設定樣式不可見即可。

這也就是為什麼我上一篇說，自己不會巧妙的利用每一個程式碼的特性。而這一篇的實現方式正是還算巧妙的利用了需要使用的多個知識點。他們結合後產生的化學反應，也就不再需要我自己吭哧吭哧搬磚似的往li身上繫結那個choose事件來監聽使用者點選了。程式碼自己給我們做了！甚至最後連使用者選了什麼都不用再做處理，直接將v-model繫結的變數傳給後端即可。

強大的v-model！

因為本需求有多選和單選，作為單頁應用，又因不需要渲染很多道題目，每次只渲染一道。所以我們可以最後根據選項判斷確定是需要多選還是單選，動態的切換這兩套就行了。

經過這個專案我更深刻地體會到了，巧妙的利用每一個程式碼的特性，你將不再光腳登山！上五樓不費勁兒的那種哦！做個輕鬆快樂的高效程式猿。

最後，由於整篇原始碼過多，而編輯器不支援程式碼摺疊，貼過來未免麻煩，有需要看原始碼與我討論或指導我程式碼的，可以留言我再單獨貼原始碼。