vue v-model實現自定義樣式多選與單選功能

2019-11-19 13:32:58

字體：大中小

來源：轉載

供稿：網友

這兩天在玩mpvue，但是下午如果對著文檔大眼瞪小眼的話，肯定會睡著的。

想起昨晚的flag，我就想直接用demo上手吧，一舉兩得

誰想到我好不容易快做完了，v-model在小程序中不起作用！

來不及研究為什么，我先直接在原來項目上趕緊建了一個test頁面，先趕緊實現我的這種設想：

使用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。具體原理直接看https://cn.vuejs.org/v2/guide/forms.html

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綁定的變量傳給后端即可。