快捷導(dǎo)航

vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例

更新時(shí)間：2017年08月12日 08:31:40 作者：朦dada

本篇文章主要介紹了vue表單綁定實(shí)現(xiàn)多選框和下拉列表的實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

在vue的實(shí)際開(kāi)發(fā)過(guò)程中，我們?nèi)绾螌⒁赃x中的值直接渲染到頁(yè)面中，這次主要說(shuō)的是多選框和下拉列表的實(shí)現(xiàn)：

<label>測(cè)試多選渲染：</label>
<div>
 <template v-for="item in chks">
  <input type="checkbox" name="hobby" :value="item.id" 
   :checked="loopsss.indexOf(item.id) > -1"/>{{item.name}}
 </template>
</div>
<label>下拉列表測(cè)試：</label>
<div>
 <select multiple style="width: 100px;">
  <template v-for="item in chks">
   <option type="checkbox" name="hobby" :value="item.id"  
       :selected="loopsss.indexOf(item.id) > -1">{{item.name}}
   </option>
  </template>
 </select>
</div>

<script>
 export default {
  data () {
   return {
    chks: [
     {id:1,name:"吃飯"},
     {id:2,name:"睡覺(jué)"},
     {id:3,name:"打豆豆"},
     {id:4,name:"唱歌"},
     {id:5,name:"學(xué)習(xí)"}
    ],
    loopsss:''
   }
  },
  mounted: function () {
   this.init()
  },
  methods: {
   init: function () {
    var arr = [1,2,4]//假設(shè)這是被選中的愛(ài)好
    this.loopsss = arr
   }
  }
 }
</script>

上述實(shí)現(xiàn)方式主要是借助indexOf方法去檢索id在值在數(shù)組中是否可以找到，如果找到，則給checked和selected屬性設(shè)置true值，這樣對(duì)應(yīng)的值就可以被選中。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

深入理解Vue3組合式API的實(shí)現(xiàn)
組合式API為Vue3帶來(lái)了更好的邏輯組織和復(fù)用性,支持TypeScript,提供靈活的響應(yīng)式系統(tǒng),它允許開(kāi)發(fā)者將相關(guān)邏輯組合在一起,通過(guò)composable函數(shù)實(shí)現(xiàn)邏輯復(fù)用,擺脫了mixin的缺點(diǎn),同時(shí),組合式API與TypeScript的集成更緊密,能夠提供更準(zhǔn)確的類(lèi)型推斷
2024-10-10
vue前端測(cè)試開(kāi)發(fā)watch監(jiān)聽(tīng)data的數(shù)據(jù)變化
這篇文章主要為大家介紹了vue測(cè)試開(kāi)發(fā)watch監(jiān)聽(tīng)data的數(shù)據(jù)變化，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-05-05
vue如何跳轉(zhuǎn)到其他頁(yè)面
跳轉(zhuǎn)到指定URL,向history棧添加一個(gè)新的紀(jì)錄,點(diǎn)擊后退會(huì)返回至上一個(gè)頁(yè)面,這篇文章給大家介紹vue如何跳轉(zhuǎn)到其他頁(yè)面,包括無(wú)參跳轉(zhuǎn)和帶參跳轉(zhuǎn),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧
2023-10-10
vue3 Element-Plus el-backtop無(wú)效問(wèn)題及解決
這篇文章主要介紹了vue3 Element-Plus el-backtop無(wú)效問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue3組件渲染前的初始化過(guò)程
Vue3?中一個(gè)組件從創(chuàng)建到掛在,會(huì)經(jīng)過(guò)3個(gè)重點(diǎn)步驟：創(chuàng)建組件實(shí)例,設(shè)置組件實(shí)例,創(chuàng)建并執(zhí)行帶副作用的渲染函數(shù),本文將著重講清?創(chuàng)建組件實(shí)例、設(shè)置組件實(shí)例?這兩個(gè)過(guò)程都做了什么,這部分邏輯很簡(jiǎn)單,但你會(huì)從中學(xué)習(xí)到?Vue?優(yōu)秀的實(shí)踐技巧,需要的朋友可以參考下
2024-07-07
vite+vue3項(xiàng)目啟動(dòng)報(bào)錯(cuò)Unexpected?“%“問(wèn)題及解決
這篇文章主要介紹了vite+vue3項(xiàng)目啟動(dòng)報(bào)錯(cuò)Unexpected?“%“問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue實(shí)現(xiàn)自定義右擊刪除菜單的示例
本文主要介紹了Vue實(shí)現(xiàn)自定義右擊刪除菜單的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
Vue2和Vue3的10種組件通信方式梳理
這篇文章主要介紹了Vue2和Vue3的10種組件通信方式梳理，本文將通過(guò)選項(xiàng)式API?組合式API以及setup三種不同實(shí)現(xiàn)方式全面介紹Vue2和Vue3的組件通信方式，需要的朋友可以參考一下
2022-08-08
使用vue制作FullPage頁(yè)面滾動(dòng)效果
本篇文章主要介紹了使用vue制作FullPage頁(yè)面滾動(dòng)效果，詳細(xì)的介紹了FullPage頁(yè)面的思路和實(shí)現(xiàn)，有興趣的可以了解一下
2017-08-08
使用Vue+MySQL實(shí)現(xiàn)登錄注冊(cè)的實(shí)戰(zhàn)案例
第一次用Vue+MySQL實(shí)現(xiàn)注冊(cè)登錄功能,就已經(jīng)踩了很多坑,下面這篇文章主要給大家介紹了關(guān)于使用Vue+MySQL實(shí)現(xiàn)登錄注冊(cè)案例的相關(guān)資料,需要的朋友可以參考下
2022-05-05