這兩天在玩mpvue,但是下午如果對(duì)著文檔大眼瞪小眼的話,肯定會(huì)睡著的。
創(chuàng)新互聯(lián)專注于企業(yè)成都營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、光澤網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、成都做商城網(wǎng)站、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù),價(jià)格優(yōu)惠性價(jià)比高,為光澤等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
想起昨晚的flag,我就想直接用demo上手吧,一舉兩得
誰想到我好不容易快做完了,v-model在小程序中不起作用!
來不及研究為什么,我先直接在原來項(xiàng)目上趕緊建了一個(gè)test頁面,先趕緊實(shí)現(xiàn)我的這種設(shè)想:
使用v-model和原生表單也可以實(shí)現(xiàn)這么好看且達(dá)到需求的效果。
重要的是不用自己跟在用戶屁股后面屁顛屁顛的監(jiān)聽人家到底何時(shí)用了點(diǎn)擊事件,又把點(diǎn)擊事件用在何處了!
效果圖如下,和之前的沒什么兩樣呢!
具體實(shí)現(xiàn)我想,vue官網(wǎng)有關(guān)于表單輸入綁定的講解和demo,事實(shí)上,我只要做到利用他的demo把我的數(shù)據(jù)和樣式調(diào)整一下就萬事大吉了!
沒有什么比簡(jiǎn)單解決一個(gè)功能更讓人開心的了!
說干就干,我直接在原來項(xiàng)目代碼的基礎(chǔ)上動(dòng)手:
之前的選項(xiàng)處理就一個(gè)li孤軍奮戰(zhàn),數(shù)據(jù)渲染、樣式切換、包括點(diǎn)擊事件都綁定在上邊,
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}}
簡(jiǎn)直忙到?jīng)]朋友啊有沒有!光他和ul的長(zhǎng)度差距就說明了一切!
現(xiàn)在我們把他要做的事分解一下:
現(xiàn)在他只負(fù)責(zé)v-for循環(huán)數(shù)據(jù)渲染
ul.qus-list li(v-for="(item,index) in state.ExamInfo.QuestionAnswerCode" v-bind:class="{'li-focus' : chooseNum==index}")
內(nèi)部分配給他兩個(gè)小弟
input:radio/checkbox和label,這倆人一個(gè)負(fù)責(zé)點(diǎn)擊后與數(shù)據(jù)的綁定,一個(gè)負(fù)責(zé)樣式。這么一說大神就明了了,好你可以走了,把沙發(fā)騰出來。
這倆人中,Input負(fù)責(zé)數(shù)據(jù)綁定,其實(shí)也就是利用v-model。具體原理直接看https://cn.vuejs.org/v2/guide/forms.html
input( type="radio" :value="item.Code" :id="'choice1'+index" v-model="picked")
然后時(shí)label負(fù)責(zé)樣式。樣式也包括用戶看到的選項(xiàng)文本的展示:
label(:for="'choice1'+index" class="choice-item") {{item.Code}}、{{item.Description}}
至于他具體怎么負(fù)責(zé)樣式?這個(gè)也利用了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被選中時(shí),label的樣式*/ input:checked + .choice-item{ background: $purpleClr; color: #FFF; }
于是就有了這樣的樣式:
這里可以看出,二者是相互成就的關(guān)系:
首先通過html那里,label的for屬性和input的id屬性關(guān)聯(lián),使得點(diǎn)擊label的時(shí)候,input也就被選擇上了。
然后是css樣式這里,label除了自己正常的樣式,還受input被選中狀態(tài)的影響,當(dāng)input被選中后(input:checked),作為input在li爸爸內(nèi)部的唯一兄弟元素(+選擇符),label的樣式就被重新更新了選中態(tài)。
因?yàn)檫x中展示的效果被label做了,那么input也就可以歸隱山林,幽香田園生活了。所以直接設(shè)置樣式不可見即可。
這也就是我上一篇說的,不會(huì)巧妙的利用每一個(gè)代碼的特性。
而這一篇的實(shí)現(xiàn)方式正是還算巧妙的利用了該用的知識(shí)點(diǎn)。
也就不再需要li身上綁定的哪個(gè)choose事件來監(jiān)聽用戶點(diǎn)擊了。代碼自己給我們做了!
甚至最后連用戶選了什么都不用管,直接將v-model綁定的變量傳給后端即可。
強(qiáng)大的v-model!
總結(jié)
以上所述是小編給大家介紹的vue v-model實(shí)現(xiàn)自定義樣式多選與單選功能,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持!
當(dāng)前題目:vuev-model實(shí)現(xiàn)自定義樣式多選與單選功能
地址分享:http://muchs.cn/article10/ihspdo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供Google、全網(wǎng)營(yíng)銷推廣、自適應(yīng)網(wǎng)站、ChatGPT、品牌網(wǎng)站建設(shè)、搜索引擎優(yōu)化
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)